Hướng dẫn sử dụng JWplayer và Videojs để xem phim

Chào các bạn, hôm nay thấy đẹp trời + lâu rồi chưa viết bài mới nên hôm nay mình sẽ hướng dẫn các bạn sử dụng 2 trình chạy video nổi tiếng nhất mình biết để làm website xem phim. Trước tiên mình sẽ giới thiệu về 2 player này.
1. JWplayer – JW (Trả phí)
– JWplayer hiện nay có 2 phiên bạn đang được sử dụng phổ biến nhất là JWplayer 6 (JW6) và JWplayer 7 (JW7)
– Hiện tại mình đang sử dụng JW6 cho website xem phim của mình (http://movie4v.net) Bản này có rất nhiều skin player đẹp, chỉ cần điền tên skin là có thể đổi rồi, tương đối dễ dùng và một phần cũng do mình dùng quen rồi. Nhược điểm của nó là chỉ sử dụng được các skin thiết kế riêng, muốn làm skin riêng thì phải tìm hiểu rất nhiều rất mất công (Skin của nó được lưu dưới dạng file XML). Ưu điểm của thằng này so với JW7 là nó có khá nhiều plugin tiện lợi để sử dụng VD: Lightout, News Ticker … Tuy nhiên số lượng plugin còn khá ít, mình nghĩ vì thằng này nó bắt trả phí nên bộ mã nguồn của nó khá phức tạp, gây khó khăn cho những người muốn làm plugin.
– JW7 tất nhiên sẽ khá hơn thằng em của nó, update nhiều chức năng hơn, mình thấy hay nhất là ở phiên bản JW7 đã cho người dùng custom skin bằng css, tức là bạn chỉ cần có chút kiến thức về css, đọc qua bài hướng dấn của JW là có thể tự chỉnh sửa skin theo ý muốn. Nhược điểm của nó thì như mình đã nói ở trên, JW đã ít plugin rồi, JW7 lại là phiên bản mới nên chẳng có plugin nào cả, đầy cũng chính là lý do mình vẫn sử dụng JW6 thay vì JW7.
– Đọc thì khá là ngon đúng không, tuy nhiên để sử dụng toàn bộ chức năng của nó ví dụ như quảng cáo, logo cho player, chạy video stream dạng m3u8 (HLS) thì phải dùng bản trả phí, bản Premium của thằng này đã có giá 299$/year rồi (Tham khảo thêm mở đây https://www.jwplayer.com/pricing/). Đối với mấy bạn sinh viên hay không đủ tiềm lực kinh tế để đầu từ mua JW thì có thể sủ dụng keygen cho JW6 (cái này bạn tìm hiểu trên google nhé :D) hoặc dùng key chùa : vào một post video của yan.vn, view source tìm đoạn jwplayer.key là thấy nhé. Tuy nhiên nếu có tiền thì bạn hãy mua để ủng hộ nhà sản suất.
2. Videojs – Vj (Miễn phí)
– Thấy miễn phí là thích rồi nhỉ

thằng này thì khá là tiện cho người dùng, có thể custom skin thoải mái, cũng chính vì sự thoải mái này nên nó không có skin riêng, không tiện như JW chỉ cần đổi tên skin là được. Tuy nhiên khả năng tùy biến skin của nó là cao hơn JW rất nhiều, thằng Vj này có thể tạo ra nhiều skin đẹp mắt hơn VD mình có skin youtube (chôm của vuighe :D) http://apimovie4v.tk/videojs Skin này mình sẽ đính kèm bên dưới cho bạn nào muốn dùng. Có lẽ là do miễn phí, mã nguồn mở nên mình thấy có rất nhiều plugin cho nó, phải nhiều gấp vài lần JW.
– Vj chức năng khá là ngang bằng JW, từ những bản Vj 5 trở xuống có rất nhiều plugin hỗ trợ cho Vj (Logo, quảng cáo, chạy stream HLS, chạy file sub ass …). Hiện tại Vj đã có phiên bản Vj 5, nhưng vì mới cập nhật nên nó cũng chỉ mới có vài plugin cần thiết để dùng player chứ những plugin từ phiên bản Vj 5 đổ xuống là chưa được cập nhật hết.

Dài dòng vậy đủ rồi, bây giờ mình sẽ vào nội dung chính của bài hôm nay: Mình sẽ hướng dẫn chạy video link mp4.

1. JWplayer: Bài này mình sẽ hướng dẫn các bạn sử dụng bản JW 7.3.4
– Đầu tiên các bạn đăng ký một tài khoản JW ở đây: https://www.jwplayer.com/sign-up/
– Sau khi đăng ký xong các bạn đăng nhập vào JW, và được JW chuyển hướng đến trang Dashboard của nó, tiếp đến bào vào trang này: https://dashboard.jwplayer.com/#/players/downloads ngó xuống dưới thấy một bảng DOWNLOADS đúng không? Bạn tìm JW Player 7 (Self-Hosted), download nó về bằng cách click vào nút ngoài cùng bên phải, trong cột download đó, nhớ lưu lại key để sử dụng.
– Bạn tài JW về giải nén vào folder theme nhé, sau đó dùng code sau để chạy video mp4

<?php

//Bắt đầu player chạy phim

?>

<!-- đoạn này chèn lên trên trong thẻ <head> (không cần trên head cũng k sao)-->

​<script src="{chỗ này điền link dẫn đến file jwplayer.js đã tải ở bên trên}" ></script>

<script>jwplayer.key="{chỗ này điền key đã lấy bên trên}";</script>

<!-- end header - start body (đoạn này chèn ỡ chỗ muốn show player ra)-->

<div id="myElement">Loading the player...</div>

<script type="text/javascript">

var playerInstance = jwplayer("myElement");

playerInstance.setup({

    file: "<?php echo $src[0]?>",

    width: 640,

    height: 360

});

</script>

– Thử chèn vào theme xem có chạy không nhé, của mình là ổn rồi.

2. Videojs Mình cũng sẽ sử dụng bản Vj 5.7.1 để chạy video.

<?php

    //Bắt đầu player chạy phim

?>

<!-- đoạn này chèn lên trên trong thẻ <head> (không cần trên head cũng k sao)-->

<link href="http://vjs.zencdn.net/5.7.1/video-js.css" rel="stylesheet">

<!-- end header - start body (đoạn này chèn ỡ chỗ muốn show player ra)-->

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">

    <source src="<?php echo $src[0]?>" type='video/mp4'>

    <p class="vjs-no-js">Bạn phải bật javascript để xem video này, và nâng cấp trình duyệt <a href="http://videojs.com/html5-video-support/" target="_blank">hỗ trợ HTML5 video</a></p>

</video>

<script src="http://vjs.zencdn.net/5.7.1/video.js"></script>