以下是自己对 PC浏览器播放HLS协议视频 的解决方法的一个搜集总结。
背景
项目要求PC端浏览器播放HLS直播视频，并且不能使用Flash插件播放器[PS:听说给政府人员使用的，不允许浏览器下载插件啥的]。
解决方法
videojs
- 功能
注意点支持PC端播放m3u8格式的视频
代码展示可能会出现 跨域 问题，需要服务端的配合，让视频允许跨域
//引入的文件 //html部分 //js部分 --这部分别忽略了[我自己没写，调的快崩溃]//var player=videojs('#my_video_1');//player.play();//视频播放var myPlayer = videojs('my_video_1<%=i%>',{ bigPlayButton : true, textTrackDisplay : true, posterImage: true, errorDisplay : true, controlBar : true},function(){ //ready 加载// console.log(this) var _that = this; this.on('loadedmetadata',function(){ }) this.on('ended',function(){ }) this.on('firstplay',function(){ }) this.on('loadstart',function(){ //开始加载 }) this.on('loadeddata',function(){ }) this.on('seeking',function(){ //正在去拿视频流的路上 }) this.on('seeked',function(){ //已经拿到视频流,可以播放 }) this.on('waiting',function(){ }) this.on('pause',function(){ }) this.on('play',function(){ })});myPlayer.play(); //视频播放复制代码 hlsJs
- 代码展示
//文件引入//html部分//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 腾讯播放器
- 知识点
点播：视频源是一个服务器上的文件，有进度条
代码展示直播：实时直播，无进度条
//引入文件// html部分 //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：
1、sewise-player [Flash和HTML5播放器]Flash播放m3u8文件2、mediaelement [Flash和Sliverlight播放器] 3、Jwplayer [Flash和HTML5播放器] 网页媒体播放器 复制代码
遇到的问题
- 跨域问题
解决方法：服务端增加支持跨域请求