Mới đăng   Xem phim   Nhạc   Video   TV   Radio    ?

Thứ Ba, 6 tháng 8, 2013

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

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í.


Đăng nhận xét   Lên đầu trang

2 nhận xét:

  1. Giới Thiệu Trang Xem Phim Đam Mê Phim
    Sau hàng loạt các trang phim ra đời nhưng chưa đáp ứng được nhu cầu xem phim của quý khán giả về chất lượng, và số lượng. Chúng tôi đã cho ra đời trang phim online với những đặc điểm nổi trội như sau:
    - Kho phim cực lớn, lên tới hàng nghìn phim online tổng hợp từ nhiều nguồn miễn phí và hàng nghìn phim HD độ nét cao, được cập nhật mới liên tục.
    - Nguồn phim online miễn phí đa dạng, được chọn lọc chất lượng, phim có độ nét cao, xem tốt trên cả máy tính lẫn cắm ra màn hình TV.
    - Sự phong phú về thể loại và các sever...có rất nhiều phim HD với độ nét cao.
    - Các link phim đều được chúng tôi kiểm tra thường xuyên, nên rất ít xảy ra lỗi.
    - Điều đặc biệt là tốc độ download phim cực nhanh.
    - Các bộ phim đều được chúng tôi sàng lọc về chất lượng và nội dung nên rất phong phú và đa dạng thích hợp cho mọi lứa tuổi.
    - Chắc chắn bạn sẽ hài lòng khi truy cập vào:
    Đam Mê Phim
    Nếu quý vị có gì không vừa ý xin phản hồi lại cho chúng tôi để chúng tôi hoàn thiện hơn nữa.


    Chúc các bạn có những giây phút xem phim thật vui vẻ và thoải mái...!

    Trả lờiXóa