Trước kia khi muốn nhúng 1 đoạn video nào đó vào blog ta thường quen với việc nhúng code của nó mà server đó cung cấp. Nếu muốn nhúng nhiều video khác nhau thì ta lại dán 1 đoạn code khác nhau. Và nếu bài viết nào đó phải nhúng nhiều đoạn video vào thì sao? ví dụ 20 video chẳng hạn, nếu ta dùng cách thủ công là chèn tất cả 20 đoạn code của 20 video vào thì cũng được, nhưng như thế trông bài viết sẽ dài lê thê, và cũng không chuyên nghiệp lắm.
Tiện ích Ancplay hôm nay mình giới thiệu sẽ giúp các bạn khắc phục vấn đề trên. Ancplay được phát triển bởi Suzuki_aka, nó cho phép người xem dễ dàng xem nhiều video khác nhau trên bài viết của bạn. Hay nói dễ hiểu hơn nó giống như 1 trình xem video đơn giản, với 1 phần hiển thị video và 1 phần hiển thị danh sách các video. Các bạn chỉ việc click vào danh sách các video và xem. Hiện tại tiện ích hỗ trợ xem video từ các server : youtube.com, videobb.com, clip.vn, cyworld.vn, video.zing.vn, stream.pub.vn, dailymotion.com, videozer.com, 4shared.com, 2shared.com..
Xem DEMO
Sau đây là các bước chèn tiện ích vào blog :
1. Vào trong code template (không cần nhấp mở rộng mẫu tiện ích), sau đó chèn đoạn code bên dưới vào trước thẻ đóng </body> , các bạn có thể chèn ở vị trí khác cũng được, nhưng bắt buộc phải chèn sau tiện ích Blog1 (phần hiển thị bài viết) :
1. Vào trong code template (không cần nhấp mở rộng mẫu tiện ích), sau đó chèn đoạn code bên dưới vào trước thẻ đóng </body> , các bạn có thể chèn ở vị trí khác cũng được, nhưng bắt buộc phải chèn sau tiện ích Blog1 (phần hiển thị bài viết) :
<script src='http://maphim-net.googlecode.com/svn/trunk/ancplay.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
M.pl(M.re("Blog1"),"anc_pl","anc_tp");
var anc_ida = M.re("Blog1").split('|')[0].split(';')[1];
$_("anc_content").innerHTML = $_("anc_nd").innerHTML;
var player_id = "player";
var player_width = 640;
var player_height = 420;
var player_stream = ""+anc_ida+"";
var params = {allowFullScreen: true, scale: 'scale', allowScriptAccess: 'always'};
var attributes = {id: player_id, name: player_id};
var player_dvrMinutes = 30;
swfobject.embedSWF('http://cdn.octoshape.net/resources/player/infinitehd/player1.swf', player_id, player_width,
player_height, "10.0.0", null, null, params, attributes);
function Rload(x){
player_stream = ""+x+"";
swfobject.embedSWF('http://cdn.octoshape.net/resources/player/infinitehd/player1.swf', player_id, player_width,
player_height, "10.0.0", null, null, params, attributes);
swfobject.addDomLoadEvent(fixReference);
}
//]]>
</script>
Bạn có thể Download File Js về TẠI ĐÂY và UPload lên host riêng để dùng lâu dài na.
Update (30/11/2011) : đã fix code javascript, do 1 số template không có thẻ div có id là wrap2, nên mình đã sửa wrap2 thành Blog1 là ổn nhất.
Update (1/12/2011 ) : Hoàn thiện tiện ích hơn với 1 số tính năng đã được fix như :
- Fix play Full Sreen tất cả Server
- Fix play server Zing, Daily
2. Save template lại.
Như vậy đã xong bước chèn tiện ích vào blog. bây giờ mình giới thiệu qua cách post bài viết.
Để trình xem video hiển thị được, bắt buộc bài viết của bạn phải tuân theo mẫu bên dưới :
Update (30/11/2011) : đã fix code javascript, do 1 số template không có thẻ div có id là wrap2, nên mình đã sửa wrap2 thành Blog1 là ổn nhất.
Update (1/12/2011 ) : Hoàn thiện tiện ích hơn với 1 số tính năng đã được fix như :
- Fix play Full Sreen tất cả Server
- Fix play server Zing, Daily
2. Save template lại.
Như vậy đã xong bước chèn tiện ích vào blog. bây giờ mình giới thiệu qua cách post bài viết.
Để trình xem video hiển thị được, bắt buộc bài viết của bạn phải tuân theo mẫu bên dưới :
{Một vài thông tin về video - vị trí 1 } <div align="center" id="anc_pl"></div> <div id="anc_tp"></div> <div id="anc_content"></div> {Một vài thông tin về video - vị trí 2 } [id]1;link video 1|2;link video 2|[/id]
- Thông tin về video các bạn có thể đặt ở vị trí 1 hoặc 2 tùy thích. Tùy vào cách bố trí bài viết của các bạn, hoặc có thể sử dụng đồng thời 2 vị trí cùng 1 lúc cũng được.
- phần code highlight là code bắt buộc có trong bài viết.
- Sau đây là hướng dẫn chèn link video vào bài viết. Như trong đoạn code trên ta thấy, chèn link vào bài viết có dạng như bên dưới :
- phần code highlight là code bắt buộc có trong bài viết.
- Sau đây là hướng dẫn chèn link video vào bài viết. Như trong đoạn code trên ta thấy, chèn link vào bài viết có dạng như bên dưới :
[id]1;link video1|2;link video2|[/id]
- Ví dụ ta có 2 link từ youtube và 2 link từ dailymotion và code mẫu như bên dưới :
[id]1;link youtube1|2;link youtube2|1;link dailymotion1|2;link dailymotion2|[/id]
và phần hiển thị sẽ trông như thế này :
Server Youtube: 1 | 2 | Server Daily: 1 | 2 |
- Nếu ta thay số 1 và 2 thành Tập 1 và Tập 2 như bên dưới :
[id]Tập 1;link youtube1|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id]
thì phần hiển thị sẽ là như thế này :
Server Youtube: Tập 1 | Tập 2 | Server Daily: Tập 1 | Tập 2 |
- nếu Tập 1 được chia làm nhiều phần nhỏ thì ta cứ thêm tuần tự link vào, và các link được ngăn cách bằng dấu chấm phẩy. ví dụ như bên dưới :
[id]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id]
- thì phần hiển thị sẽ như thế này :
Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 | Server Daily: Tập 1 | Tập 2 |
- Tương tự như thế, nếu video có từ nhiều nguồn thì ta cứ việc thêm vào phía sau nó. ví dụ như bên dưới :
[id]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|1;link zingmovie1|2;link zingmovie2[/id]
- và phần hiển thị sẽ là :
Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 | Server Daily: Tập 1 | Tập 2 | Server Zing: 1 | 2 |
Như vậy mình đã giới thiệu xong. chúc các bạn thành công.
Bạn có thể xem bản cập nhật tại đây
Hoặc cách tạo trang nghe nhạc
Bạn có thể xem bản cập nhật tại đây
Hoặc cách tạo trang nghe nhạc
theo: fandung.
Nhận xét
=D>
Trả lờiXóaChúc Blog Namkna một mùa giáng sinh an lành và hạnh phúc hén !
Trả lờiXóaTiện đây giúp đỡ mình chuk hen, mình áp dụng thủ thuật trên nhưng mà không thấy hiển thị, ko biết cài đặt code có bị lỗi hok, vì mình Paste đoạn code trên vào blog mình thì nó báo thiếu thẻ đóng Script, và mình thêm vào, mình cũng upload file js lên googlecode của mình, Namkna làm giúp mình nhé.
@Elvis Anh Cảm ơn bạn đã thông báo lỗi với mình. Đây là do sơ xuất trong lúc mình chuyển đổi codde, hiện tại mình đã Fix lại các lỗi do bạn báo đó là:
Trả lờiXóa- Thêm thẻ đóng //]]></script>
- Update lại File Js, bạn có thể TẢI VỀ hoặc tren phần bài đăng sau đó. Upload lên để sử dụng.
- Nếu còn ghì thắc mắc bạn có thể hỏi tiếp :)
Chúc bạn có một giáng sinh vui vẻ bên người thân và gia đình :)
SAO MÌNH LÀM KHÔNG ĐƯỢC VẬY. MÌNH LÀM ĐÚNG THEO CÁC BƯỚC RỒI
Trả lờiXóaỞ mục nhứng bài mới post hoặc trong wiget những bài mới xem lại hiển thị đoạn code chứ không hiển thị được hình thu nhỏ. Gặp lỗi này xử lý thế nào đây bạn? Blog phim của mình đây, bạn ghé qua xem giúp mình nhé.
Trả lờiXóaPost nhiều tập làm sao biết tập nào mình đang xem vậy?
Trả lờiXóaCÓ hiệu ứng hover ở tên tập đó bạn.
XóaMình làm như thế này và ko được trên mọi teamplate vẫn lưu code được nhưng post bài lên thì ko được
XóaANC này k chạy đươc video của picasaweb hã anh
Trả lờiXóaup thêm picasa web đi anh
Trả lờiXóaCó cách nào khắc phục lỗi thêm ancplay scripts thì bị mất slide show light box ảnh mặc định của blogger ko bạn :(
Trả lờiXóaAdmin ơi cho mình hỏi làm sao chèn iframe vào flash vậy. thanks
Trả lờiXóaSEO KO ĐC B? ĐÂY: http://phimkhoahocvip.blogspot.com/2011/12/phim-suc-ep-tong-uong-66tap-tron-bo.html MÌNH LÀM ĐÚNG RỒI MÀ VÀO XEM KO ĐC
Trả lờiXóamình chèn xong thì báo lỗi "google feed api error", fix lỗi ntn vậy b? http://phimkhoahocvip.blogspot.com/
Trả lờiXóaNamkna cho hỏi, sao chèn video youtube thì xem được, nhưng chèn video google docs thì k xem được?
Trả lờiXóaAnh ơi cho em hỏi muốn đổi màu tập mình đang xem thì làm như thế nào? với lại cái phần sever nhìn "thô sơ" quá @@
Trả lờiXóaCái này còn dùng được không vậy các bác
Trả lờiXóam có link flim https://r5---sn-i3b7rn7y.googlevideo.com/videoplayback?requiressl=yes&shardbypass=yes&cmbypass=yes&id=f19cb9bfed604404&itag=18&source=picasa&ip=183.81.85.233&ipbits=0&expire=1428510711&sparams=cmbypass,expire,id,ip,ipbits,itag,mm,ms,mv,nh,pl,requiressl,shardbypass,source&signature=6DB08B105EC7B58394C8B38D5E57AD670E28944C.44DE43DED8E0646FCC4998905DADBA0CEB6C0134&key=cms1&cms_redirect=yes&mm=30&ms=nxu&mt=1425983868&mv=m&nh=IgpwcjAxLmhrZzA4KgkxMjcuMC4wLjE&pl=20 nhưng dùng cách này không được. Bạn chỉ giúp mình với
Trả lờiXóasao chèn video youtube thì xem được, nhưng chèn video google docs,picasa, daily thì k xem được?
Trả lờiXóa