播放器选型及实例演练
生活随笔
收集整理的這篇文章主要介紹了
播放器选型及实例演练
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.播放器選型
1.Video.js
- 國外流行的視頻播放框架
- 自定義UI（進度條等）
- 開發簡單
- 提供插件（滿足彈幕、清晰度切換、快捷鍵等需求）
- 適合點播和直播
2.hls.js
- 適合做hls類型的直播和點播
3.flv.js
- b站開源的flv格式的播放器
- 適合基于http-flv的直播
二.實戰開發
- 全局安裝eslint，提高代碼質量npm install eslint@>=4.18 -g
- 創建demo文件夾并初始化npm init
- 執行eslint --init選擇對應的style、format配置eslint
1.開發video.js播放器
-
創建video文件夾mkdir video
-
創建html及js文件touch video.html;touch video.js;
-
鏈入<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet"><script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
-
點播Demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet"><script src="//vjs.zencdn.net/7.3.0/video.min.js"></script><title>Document</title> </head> <body><videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"><!-- 修改成指定地址 --><source src="./test.mp4" type="video/mp4"></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that</p></video> <script type="text/javascript">var player = videojs('my-player',{width:400,height:200});</script> </body> </html>- 添加外部css及js資源
- 加載對應的video框架源碼（直播還需要加載對應直播的js文件框架）及source源
- js中配置video對象
- 可以查詢videojs的plugins and skins插件內容實現相應功能
-
直播Demo
- 下載video-contrib-hls插件
- 開啟上一章節的server
- 執行ffmpeg -re -i test.mp4 -c copy -f flv rtmp://localhost:1935/live/movie實現推流
2.開發hls.js播放器
-
創建hlsjs文件夾
-
創建文件touch index.html;touch index.js;，并在github上找到hls.js文件并下載
-
點播實例Demo
-
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="./index.js"></script><script src="./hls.js"></script><title>HLS</title> </head> <body><video id="video" controls width="400" height="200"/> </body> </html> -
index.js
var Hls = window.Hls; if(Hls.isSupported()) {var video = document.getElementById("video");var hls = new Hls();hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');//流(點播)hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();}); }else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';video.addEventListener('loadedmetadata',function() {video.play();}); }
-
-
直播實例Demo
-
運行server
-
執行ffmpeg -re -i test.mp4 -c copy -f flv rtmp://localhost:1935/live/movie實現推流
-
修改流地址
var Hls = window.Hls; var url = "http://127.0.0.1:7002/live/movie.m3u8"; if(Hls.isSupported()) {var video = document.getElementById("video");var hls = new Hls();hls.loadSource(url);//流(直播)hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();}); }else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = url';video.addEventListener('loadedmetadata',function() {video.play();}); }
-
-
可以發現hls.js開發的播放器在播放滾動條等方面沒有videojs好，但是比videojs小，靈活
-
直播擴展UI實例Demo
-
修改index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="./index.js"></script><script src="./hls.js"></script><link ref="./index.css"/><title>HLS</title> </head> <body><div class="player pause"><video id="video"/><em class="btn"></em></div> </body> </html> -
創建index.css文件
#設置播放器的尺寸 .player{width:400px;height:200px;position:relative; } #設置video的寬高 .play video{width:100%;height:100%; } #設置播放暫停按鈕 .player .btn{display:none;width:40px;height:40px;border-radius:50%;position:absolute;left:50%;top:50%;margin:-35px auto auto -35px;padding:15px;background:rgba(255,255,255,0.5);line-height:40px; } .player .btn:hover{background:rgba(255,255,255,0.7); } #利用偽元素實現播放暫停按鈕圖標 .player .btn:before{border:20px solid #ddd;border-top-color:transparent;#border上下右都是透明色border-bottom-color:transparent;border-right-color:transparent;content:" ";display:block;margin-left:10px;width:0;height:0; } .player .btn:before:hover{border-left-color:#fff; } #設置暫停狀態 .player.pause .btn{display:block; } -
修改index.js文件
var Hls = window.Hls; var video = document.querySelector('video'); var btn = document.querySelector('.btn'); var player = document.querySelector('.player'); var url = "http://127.0.0.1:7002/live/movie.m3u8"; if(Hls.isSupported()) {var hls = new Hls();hls.loadSource(url);//流(直播)hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED,function() {video.play();}); }else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = url';video.addEventListener('loadedmetadata',function() {video.play();}); } btn.addEventListener('click',function(){//判斷當前視頻是否是暫停階段if(video.paused){video.play();}else{video.pause();} }); //當點擊video任何一個位置時都在play和pause中切換 video.addEventListener('click',function(){if(video.paused){video.play();}else{video.pause();} }) //當切換到播放狀態時，使用player類去修飾 video.addEventListener('play',function(){player.className = "player"; }) //當切換到暫停狀態時，使用pause類去修飾 video.addEventListener('pause',function(){player.className = "player pause"; })
-
-
顯示直播或是點播文本信息
-
修改index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="./index.js"></script><script src="./hls.js"></script><link ref="./index.css"/><title>HLS</title> </head> <body><div class="player pause"><video id="video"/><em class="btn"></em><span class="state">正在直播</span></div> </body> </html> -
添加樣式
#直播字體樣式 .player .state{position:absolute;bottom:20px;left:40px;font-size:14px;color:#000; } #暫停狀態的state .player.pause .state{display:none; }
-
3.開發flv.js播放器
-
創建flvjs文件夾
-
創建文件touch index.html;touch index.js;，并在github上找到flv.js文件并下載
-
編寫index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="./index.js"></script><script src="./flv.js"></script><link ref="./index.css"/><title>FLV</title> </head> <body><video id="videoElement" width="200" height="50"></video> </body> </html> -
編寫index.js
var flvjs = window.flvjs; if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://127.0.0.1/flv/video.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play(); }
三.開發總結
1.直播的工作原理
- 分清協議和通信原理與區別的關系（直播相關的協議）
2.video的深入理解
- 屬性
- 方法
- 事件
3.直播流的制作
4.H5直播
- 播放器的選型（videojs,flvjs,hlsjs）
- 播放器的擴展
總結
以上是生活随笔為你收集整理的播放器选型及实例演练的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VDS三个月暴涨60倍，他却宁愿摊摊手放
- 下一篇： 使用jdbc方式（token登陆）连接星