流媒体之视频切片及播放

现代浏览器不再支持flash及h5的强大使得h5播放视频文件势在必行，首要面临的一个问题就是用户观看视频的时候是直接完全加载整个视频的（不管你看了多久），从一开始播放就开始加载，并且并不会因为用户暂停而暂停加载，它是一直持续加载直到加载完全的。对于绝大多数用户来说，他们不一定会把视频看完，如果是加载一个小视频，那还没有什么大问题，但如果是加载一个大视频的话，这就会浪费的大量的流量，并且加载过程会持续占用带宽，使得用户量多的时候，视频加载就会出现问题。

一个解决方案就是是哟哦那个视频切片，原理就是将视频文件切分成若干个ts文件，当用户看一段加载一段，视频无缝播放用户体验良好，当用户暂停获跳出就不再继续加载，这更大的程度的节省了带宽，是个尤佳的解决方案，下面我们说下由 .MP4转成ts文件使用到的ffmpeg工具

1、ffmpeg安装

sudo gem install ffmpeg

2、将mp4转为完整的ts

ffmpeg -i .\test.mp4 -c copy -bsf h264_mp4toannexb .\video\test.ts
//注释： .\test.mp4处为输入视频源路径
// .\video\test.ts为输出视频源路径

3、将ts切片并生成.m3u8的文件

ffmpeg -i .\video\test.ts(1) -c copy -map 0 -f segment -segment_list playlist.m3u8(2) -segment_time 5(3) -segment_list_entry_prefix 'localhost/video'(4) D:\ffmpeg\video\test_%03d.ts(5)

//注释
//(1) 上一步输出的ts文件路径
//(2) 指定输出m3u8文件路径--指定文件夹必须存在
//(3) 指定秒数为每段ts文件的时长，由于关键帧的因素存在误差
//(4) 指定在m3u8文件中每个ts片段的网络或者本地绝对路径--可省略
//(5) 指定存放ts片段路径--指定文件夹必须存在

4、视频切片的播放

采用h5的video标签，将m3u8文件的路径赋值给src属性即可，注意：生成的ts切片需与播放的m3u8文件需是在同一路径

<video id="myVideo" class="video-js vjs-default-skin"  preload="auto" width="300px" height="500px">  
    <source id="source" src="./video/xsb.m3u8"  type='application/x-mpegURL'>
</video>

video标签是不能直接m3u8格式的视频的，那么问题来了，这里我们采用videojs库，它有videojs-contrib-hls的插件实现m3u8的播放，完美！这里就不再赘述用法，自行百度。考虑到低版本的浏览器我们还是需要播放flash的我们可以利用videojs强大的功能：当检测到浏览器不支持video标签是自动加载flash

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" autoplay loop preload="auto" width="1080" height="708" data-setup="{}">
    <source id="source" src="./test.mp4"  type="application/x-mpegURL">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="500" id="ad_djx" title="ad">
        <param name="movie" value="http://image.finance.china.cn/picupload/2016/0516/47_252733724_20160517093305.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="http://image.finance.china.cn/flash/expressInstall.swf" />
    </object>
</video>

此时在你以为大功告成了，不，你错了，在你测试可爱的IE的时候你会发现有坑。。9、10确是不能播放。

5、兼容性

原来是videojs-contrib-hls插件在5.0版本后就不再兼容IE10及以下版本了，所以就是想再IE上播放必须升级到最新的Edge，这时候领导是不同意的，那么属于前端宝宝的兼容性处理就提上来了，为什么？因为你是前端～

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="500" id="ad_djx" title="ad">
    <param name="movie" value="http://image.finance.china.cn/picupload/2016/0516/47_252733724_20160517093305.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="http://image.finance.china.cn/flash/expressInstall.swf" />
    <!--[if !IE]><!--> 
    <video id="myVideo" class="video-js vjs-default-skin"  preload="auto" width="300px" height="500px">    
        <source id="source" src="./video/xsb.m3u8"  type='application/x-mpegURL'>
    </video>
     <!--<![endif]-->
</object>

上边的代码来了，解决了所有问题，亲测能兼容包括Safari、谷歌、火狐、360及Edge至IE7,播放效果良好，简单的介绍下

条件注释使得非IE浏览器加载video标签，ie10及以下加载flash,实现兼容。

转载于:https://www.cnblogs.com/bella-lin/p/9627292.html

文章评论