Tạo playlist hay danh sách phát mp3,video cho blog, web bằng HTML5
Hôm nay xin hướng dẫn các bạn cách tạo playlist cho tap audio trong HTML5
Các bạn làm như sau nhé :
Hình chỉ mang tính chất minh họa
1. Sao chép và dán mã dưới đây vào ngay sau thẻ <head> của web/ blog:
<!--HTML5 Video playlist 1 | vivublogspot.blogspot.com-->
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<!--Tệp tin dự bị: <script src='https://sites.google.com/site/ntdongzoom/home/file-audio/html5-video-playlist-jquery.js' type='text/javascript'/>-->
<style type='text/css'>
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:620px;
height:350px;
margin:5px;
border:1px solid silver;
}
</style>
<!--End code-->
Thay đổi giá trị màu đỏ (kích thước) cho thích hợp với blog của bạn.
2. Sao chép và dán mã dưới đây vào trước thẻ </head> của web/ blog
<!--HTML5 video playlist 2 | vivublogspot.blogspot.com-->
<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 code-->
3. Nhúng mã dưới đây vào widget, trang đăng, bài đăng... để phát nhạc, video
<video autoplay="True" id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
<li movieurl="https://sites.google.com/site/ntdongzoom/home/file-audio/03-westlife-something_right.mp3 "><b> Something right - weblife</b></li>
<li movieurl="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"><b>Hoạt hình </b></li>
<li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm"><b>Hoạt hình 1</b></li>
<li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm"><b>Hoạt hình 2</b></li>
</ul>
Chú thích :
Bạn thay thế các phần tô màu đỏ cho phù hợp với mình nhé.
- Màu True : là tự động phát
- Màu đỏ : là đường dẫn (URL) tệp tin nhạc hoặc video.
- Màu xanh là tiêu đề của video/ mp3
Các hosting miển phí bạn có thể tải file lên như: Videobam, Clip.vn; tải MP3 lên Kiwi6.com
Chúc các bạn thành công !
0 nhận xét:
Post a Comment