首先你需要配置页面的 meta

<meta name="viewport" content="width=device-width,  initial-scale=1.0,maximum-scale=1.0,  minimum-scale=1.0, user-scalable=no,  target-densitydpi=device-dpi" />

计算 rem 比例

 (function () {
    function setFontSize() {
        var deviceWidth document.documentElement.clientWidth |document.body.clientWidth;
        if (deviceWidth > 768) {
            deviceWidth = 768;
        } else if (deviceWidth < 320) {
            deviceWidth = 320;
        }
        document.documentElement.style.fontSize (deviceWidth / 7.5) + 'px';
        setFontSize();
    })();

微信 video 属性

 <video 
    poster="poster.png" 
    id="video_main" 
    class="video-source" 
    width="100%" 
    height="100%" 
    webkit-playsinline="true"
    x-webkit-airplay="true" 
    playsinline="true"  /*IOS支持小窗内播放*/ 
    x5-video-player-type="h5"  /*安卓版特性*/
    x5-video-orientation="portraint"  /*landscape横屏，portraint竖屏，默认值为竖屏*/
    preload="auto"
    src="video.mp4"
    preload="auto" /*预加载*/ 
    style="object-fit:fill"  /*指定填充模式，不一定需要*/ 
>
</video>

javascript 获取页面参数

1.使用内置 URL 对象

//js 获取页面 urlarg
function getUrlArg(name){
    var url = new URL(location.href);
    return url.searchParams.get(name);
}

var c = getUrlArg("c");
console.log(c);

2.传统方式

//比较老的浏览器
function parse_query_string() {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

//parse_query_string()["a"];
//parse_query_string()["b"];

canvas 绘制 video 视频

可以使用 canvas2DApi 中的 context.drawImage 来将 video 的画面绘制在 canvas 上，这样可以对画面进行一些处理。

... ...
function step(step) {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

实例:

点击播放 左边 video 右边 canvas