以下是自己对 PC浏览器播放HLS协议视频 的解决方法的一个搜集总结。
背景
项目要求PC端浏览器播放HLS直播视频，并且不能使用Flash插件播放器[PS:听说给政府人员使用的，不允许浏览器下载插件啥的]。
解决方法
videojs
- 功能
- 注意点
- 代码展示
支持PC端播放m3u8格式的视频
可能会出现 跨域 问题，需要服务端的配合，让视频允许跨域
//引入的文件
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
//html部分
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL">
</video>
//js部分 --这部分别忽略了[我自己没写，调的快崩溃]
var player=videojs('#my_video_1');
player.play();
复制代码hlsJs
- 代码展示
//文件引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
//html部分
<div class="video" id="HLSPlayer" >
//js部分
var video = document.getElementById('video');
var hls = new Hls();
var hlsUrl = 'http://域名/hls/123.m3u8';
hls.loadSource(hlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(){
video.play();
});
复制代码TcPlayer 腾讯播放器
- 知识点
- 代码展示
点播：视频源是一个服务器上的文件，有进度条
直播：实时直播，无进度条
//引入文件
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>
// html部分
<div id="id_test_video" style="width:400px; height:300px;"></div>
//js部分
var player = new TcPlayer('id_test_video', {
"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
//"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
"autoplay" : true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"coverpic" : "http://img4.imgtn.bdimg.com/it/u=4038339613,2609508265&fm=200&gp=0.jpg",
"width" : '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});
复制代码注意：存在跨域问题，并且不能在本地测试，详情请看以下
TcPlayer 腾讯播放器的链接
知识点
- 知识点1： PC 端需要通过其他手段（videojs-contrib-hls）来解码 .m3u8 格式的视频, 才能够通过 video 标签或者 Flash 来播放
- 知识点2： 无 Flash 时代，让直播拥抱 H5(完整篇) [可以了解一下这篇文章，多学无害嘛]
- 知识点3： RTMP: 浏览器中只能使用 Flash实现播放器，无法支持移动端 WEB播放
- 知识点4： 其他 PC浏览器播放技术：
1、sewise-player [Flash和HTML5播放器]Flash播放m3u8文件
2、mediaelement [Flash和Sliverlight播放器]
3、Jwplayer [Flash和HTML5播放器] 网页媒体播放器
复制代码遇到的问题
- 跨域问题
解决方法：服务端增加支持跨域请求