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

这几天，网页中的视频在移动端显示的层级非常高，给定位是解决不了的，在网上找了很多方法，然后找到了只有用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