H5播放大视频，高清视频

有一段需求，需要在手机端播放高清视频，通过升级宽带，压缩视频等还是不能流畅播放，IOS还好，android基本播放不了。

解决方案：视频转码

工具：ffmpeg + video.js 

1.安装ffmpeg，首先下载windows 可用的ffmpeg文件，网址为：https://ffmpeg.zeranoe.com/builds/

2.在系统变量的path中添加ffmpeg文件夹中 bin 的路径

3.在CMD中输入 ffmpeg -version,出现如下信息则配置成功

参考资料：https://blog.csdn.net/qq_36623327/article/details/83007456

https://www.cnblogs.com/lidabo/p/7419393.html

通过php来执行转码代码：

exec('ffmpeg -i '.$fname.' -profile:v high -level 4.2 -s 1080x1920 -start_number 0 -hls_time 2 -hls_list_size 0 -f hls '.$new_fname);

$fname = "mp4视频路径";

$new_fname = "输出m3u8转码视频路径";

-s 转码视频的分辨率，其他可以不调整

H5播放解决

<link rel="stylesheet" type="text/css" href="v/video-js.min.css" />

<script src="v/video.min.js"></script>

<script src="v/videojs-contrib-hls.js"></script>

html：

<video id="fangtan_vid"  controls="controls" class="video-js vjs-default-skin vjs-big-play-centered" poster="css/images/load.gif" x-webkit-airplay="true" x5-video-player-fullscreen="false" preload="auto" playsinline="true" webkit-playsinline x5-video-player-typ="h5"><source id="fangtan_source" src=""  type="application/x-mpegURL"></video>   

脚本：

var player = videojs('fangtan_vid', { "poster": "", "controls": "controls" ,"autoplay":"autoplay"}, function() {

console.log('videojs播放器初始化成功');

    this.on('play', function() {

    });

    //暂停--播放完毕后也会暂停

    this.on('pause', function() {

    });

    // 结束

    this.on('ended', function() {

    })

});

player.play();