html原生video标签部分手机浏览器无法自动播放视频解决

发布于 2020-04-30  867 次阅读


由于某些机型某些浏览器的兼容性导致html的原生video组件无法自动播放,所以为了能自动播放视频只能用其他解决办法了(不)

这个时候就要用到一个第三方组件:JSMpeg

GitHub地址:https://github.com/phoboslab/jsmpeg

用了组件之后虽然能实现自动播放,但是组件只支持ts格式的文件(有点蠢),所以还需要用到ffmpeg来对视频进行格式转换

ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts

执行以上代码就能把mp4 转成ts格式

这里jsmpeg提供两种生成组件的方式,一种是直接使用html标签

<div class="jsmpeg" data-url="video.ts" 
data-loop="true" data-autoplay="true"></div>

另一种是直接在js中new jsmpeg即可

var player = new JSMpeg.Player('video.ts' {loop: true, autoplay: true});

至于参数和方法啥的,官网的GitHub上都有文档,自行参考

后续===>

以上写法貌似是没法控制控件大小,如果想要控制控件大小直接用canvas即可

<canvas id="canvas"></canvas>

  $('#canvas').css({
        width: $(window).width(),
        height: $(window).height()
    });
  var canvas = document.querySelector('#canvas');
    var player = new JSMpeg.Player('out.ts', { canvas: canvas, loop: true, autoplay: false, audio: true });
   


一个逐渐被时间遗忘掉的人