header ads

Mã tạo playlist/ danh sách phát video (phim) hoặc MP3 cho blog/ web bằng HTML5

Kim Luc Thứ Ba, tháng 8 06, 2013
Trong trường hợp bạn cần nhúng nhiều video clip vào 1 bài đăng, bạn có thể nhúng các video theo thứ tự từ trên xuống dưới nhưng làm như thế thì không hay. Dưới đây là hướng dẫn tạo danh sách phát/ playlist để phát nhiều video clip trong 1 trình phát video trong một bài đăng của blog/ website bằng HTML5. Điều này giúp bạn có thể tạo 1 blog (blogger/blogspot) xem phim chẳng hạn.

Xem minh họa


Cách thực hiện:

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 | Socplay.blogspot.com-->
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<!--Tệp tin dự bị: <script src='http://socplay.weebly.com/uploads/1/1/4/1/11413983/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 đỏ 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 | Socplay.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ã như dưới đây vào bài đăng để tạo danh sách phát/ playlist:

<video autoplay="true" id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
<li movieurl="http://nplus.nixcdn.com/448eca38f491f0a99aef2bf8360e557e/521f4a13/PreNCT6/AnhMuonEmSongSao-BaoAnh-2730206.mp4"><b>Anh muốn em sống sao - Bao Anh</b></li>
<li movieurl="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"><b>Sintel</b></li>
<li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm"><b>Resident Evil</b></li>
<li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm"><b>Big Buck Bunny</b></li>
</ul>

    Trong đó,
  • true: Tự động phát
  • http://nplus.nixcdn.com/448eca38f491f0a99aef2bf8360e557e/521f4a13/PreNCT6/AnhMuonEmSongSao-BaoAnh-2730206.mp4 là đường dẫn (URL) tệp tin video có định dạng .MP4. Bạn có thể tải Video lên các hosting miển phí như: Videobam, Clip.vn; tải MP3 lên Kiwi6.com
  • Anh muốn em sống sao - Bao Anh,Sintel,Resident Evil, Big Buck Bunny là tiêu đề của video/ MP3
  • .webm là tệp tin video có định dạng .webm

Hình ảnh trong bài viết chỉ mang tính trang trí.

Tags:

Đăng nhận xét

0 Nhận xét