微信浏览器中Video标签的使用

标签是 HTML 5 的新标签。

video标签在各平台的表现和使用方法有很大的区别，根据应用场景一般分为PC端、普通移动端（ios和安卓也有区别）、移动端的微信浏览器等，其使用难易程度和受到限制依次增加。

本次项目需求是在微信浏览器内使用video标签播放获取到的视频，并记录下每个视频的时长、播放时间传给后台，方便与APP端同步记录。

一般video的标签如下：poster、src这种动态值可以根据接口返回的值变化。
有时候在微信网页端插入标签的时候,不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性
此外还包括很多属性。

但是，在移动端，微信浏览器内，大部分属性等于无效。

自动播放：

先引入微信的js文件：

再调用微信端的专用接口：

	document.addEventListener("WeixinJSBridgeReady", function () { 
          document.getElementById("myVideo").play(); 
          document.getElementById("myVideo").pause()
      }, false); 

此时可实现进入页面自动播放。

手动播放：

若不引入微信js文件，那么无法通过点击事件控制video行为，只能点控制条control来控制。为了美观和用户操作体验，这里
仍引入微信的js文件和专用接口，但是通过点击赋值视频地址的方式，达到点击播放的效果。

一些资料：

微信H5记录视频播放进度
https://segmentfault.com/a/1190000014577509

监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
https://blog.csdn.net/mr_smile2014/article/details/52064650

js在关闭页面前弹出确认提示
http://www.365mini.com/page/js-confirm-close-window.htm

Window setInterval() 方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。

HTML5 video 元素及获取视频播放事件
http://yijiebuyi.com/blog/154df41ba6e6415cc2d427b1940b5334.html

H5前端工程师必须了解的Video标签几大坑
https://www.jianshu.com/p/fb9eb1c587cb

注意：
1、在微信浏览器中，destroy钩子函数无法连接口传输数据。