H5直播演练
播放器选型video.jshls.jsflv.js播放器选型
video.js
链接: GitHub
/video.js/dist/video-js.min.css
/video.js/dist/video.min.js
自定义ui
多插件
体积大
功能齐全
符合线上场景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link href="/video.js/dist/video-js.min.css" rel="stylesheet"></head><body><video id="my-player" class="video-js" controls preload="auto" poster="///v/oceans.png" data-setup='{}'><source src="https://gcalic./gc/gccntv240-lzb01_1/index.m3u8?contentid=280516001" type="application/x-mpegURL"></video><script src="/video.js/dist/video.min.js"></script><script type="text/javascript">// var player = videojs('my-player');var options = {width:400,height:200};var player = videojs('my-player', options, function onPlayerReady() {videojs.log('Your player is ready!');// In this context, `this` is the player that was created by Video.js.// this.play();// How about an event listener?this.on('ended', function() {videojs.log('Awww...over so soon?!');});});</script></body></html>
hls.js
体积小 易扩展
适合hls类型的直播、点播
链接: GitHub
/npm/hls.js@latest
下面demo样式有点问题，就不注重了，主要是能让视频播放出来。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.player{width: 200px;height: 100px;position: relative;}.player video{width: 100%;height: 100%;}.player .btn{width: 40px;height: 40px;border-radius: 50%;position: absolute;left: 50%;top: 50%;margin: -35px auto auto -35px;padding: 15px;background-color: rgba(255,255,255,0.5);line-height: 40px;display: none;}.player .btn:hover{background: rgba(255,255,255,0.7);}.player .btn:before{border: 20px solid #ddd;border-top-color: transparent;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;}</style></head><body><div class="player"><!--页面未加载完成时就播放音频chrome会报错 所以默认静音--><video id="video" muted></video><em class="btn"></em></div><script src="/npm/hls.js@latest"></script><script>var Hls = window.Hls;var video = document.getElementById('video');var btn = document.querySelector('.btn');var player = document.querySelector('.player');var videoSrc = '/stream.m3u8';if (Hls.isSupported()) {var hls = new Hls();hls.loadSource(videoSrc);hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function() {// video.play();});}else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = videoSrc;video.addEventListener('loadedmetadata', function() {// video.play();});}// 自定义播放暂停按钮btn.addEventListener('click',function () {if(video.paused){console.log(111)video.play()}else{console.log(222)video.pause()}})btn.addEventListener('play',function () {player.className = 'palyer';})btn.addEventListener('pause',function () {player.className = 'palyer pause';})// 点击视频播放暂停video.addEventListener('click',function () {if(video.paused){video.play()}else{video.pause()}})</script></body></html>
flv.js
B站开源
/Bilibili/flv.js
