Vibay

Thứ Hai, 2 tháng 2, 2015

[HTML5] Phương pháp hiển thị nội dung một các ngẫu nhiên V2.1

Giả sử bạn có 9 bài hát (bài 1, bài 2, bài 3,..., bài 9) và bạn muốn hiển thị các bài hát này một một cách ngẫu nhiên không theo thứ tự mỗi khi người xem truy cập vào trang blog/ web của bạn. Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

Xem thêm: - [HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

- [HTML5] Tạo danh sách (playlist) Audio/ video tự động phát ngẫu nhiên

1/ Sao chép và dán đoạn mã dưới đây vào sau thẻ <head> hoặc trước thẻ </head>:

<!--js shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-1, j, temp; i>=0; i--) { j=Math.floor(Math.random()*(i+1)), temp=$x[i], $x[i]=$x[j], $x[j]=temp; }
$x.each(function(i, li) { $(".content").append(li); });
});//]]>
</script>
<!--end js shuffle-->
<!--js playlist-->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}

#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:500px;
height:300px;
margin:10px;
border:1px solid silver;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})
});//]]>

</script>
<!--end js playlist-->

2/ Để hiển thị bài hát một cách ngẫu nhiên bạn sử dụng mã dưới đây, đặt trong <body> hay trong bài viết biên tập bằng HTML

<audio id="videoarea" controls="controls" poster="" src="" autoplay="true"></audio>
<div id="n"></div>
<ul id="playlist" class="content">
<li movieurl="http://k007.kiwi6.com/hotlink/pq6y6ubt5j/M_t_c_i_i_v_-_ElvisPhuong.mp3">Một cõi đi về</li>
<li movieurl="http://k007.kiwi6.com/hotlink/w3ecw48j3i/Di_m_x_a_-_ElvisPhuong.mp3">Diễm xưa</li>
<li movieurl="http://k007.kiwi6.com/hotlink/car0d545el/H_Tr_ng-ElvisPhuong.mp3">Hạ trắng</li>
<li movieurl="http://k007.kiwi6.com/hotlink/xxtwx81vxf/T_i_ru_em_ng_-ElvisPhuong.mp3">Tôi ru em ngủ</li>
</ul>

Giờ đây, bạn có thể phát triển thêm để hoàn thiên playlist (Danh sách phát) của bạn bằng cách thay đổi mã tạo playlist nằm trong đoạn này: <!--js playlist-->... <!--end js playlist-->

Trên internet có rất nhiều trang mạng hướng dẫn tạo playlist. Chúc bạn thành công!

Không có nhận xét nào:

Đăng nhận xét