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!
Nhận xét
Đăng nhận xét