这几天,网页中的视频在移动端显示的层级非常高,给定位是解决不了的,在网上找了很多方法,然后找到了只有用jsmpeg将video转换成canvas才行。

1.  <canvas id="video"></canvas>

2. 在网页中引入 <script type="text/javascript" src="./static/js/jsmpeg.js"></script>

3. https://github.com/phoboslab/jsmpeg的jsmpeng具体说明文档

    var player = new JSMpeg.Player('./static/FinalRender_App_3_1.ts', {

      canvas: document.getElementById("video"),

      loop: false,

      autoplay: true,

      startSign: true,

      startCallBack: function () {

      }

      // playingCallBack: playingFun,

      // endCallBack: endFun

    });

    player.play();

4. 以上视频的地址只能是ts格式,所以我们要http://ffmpeg.org/在ffmpeg的官网下载可以将MP4或者其他格式的视频转为ts格式的相关exe。

5. 下载下来打开bin文件夹,在此窗口打开cmd命令行,

网页中视频适应移动端的方法

网页中视频适应移动端的方法

ffmpeg -i FinalRender_App_3_1.mp4 -f mpegts -codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k FinalRender_App_3_1.ts

6. 这样就可以转换成功呢。

7. 判断是安卓还是ios

  var u = navigator.userAgent;

  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

8.只有在安卓手机上video的层级才会最顶级,ios和普通浏览器上是正常的,所以这里可以做个判断。

9. console.log('${x} == false'.replace(/\${(.*?)}/g, '')) 这里结果为===false

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-19
  • 2022-01-08
猜你喜欢
  • 2022-12-23
  • 2022-02-08
  • 2021-12-23
  • 2021-12-26
  • 2021-12-12
  • 2021-11-27
  • 2021-06-05
相关资源
相似解决方案