video.js 移动端显示播放视频

工作需求 需要在手机端显示视频，视频地址是后台提供

想到的处理办法：

最开始直接用的h5的 加载元数据，

但是在有的机型上，能显示视频，部分上却无法显示

查阅了许多资料，都没能让所有的样式统一，尤其是微信浏览器，而主要针对的用户却都是从微信上访问的，

所以这个问题必须解决，

遇到的问题：

1.部分机型上无法显示视频，只显示一个播放按钮，

preload="metadata"

这个属性也加了，但是在部分机型上还是无法显示  比如iphone

在stack overflow上找到一个判断方法

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone) {
    $videoTag = '

再调用的时候

判断 如果是iphone，就先 播放  再暂停，

这种方法太粗暴，当显示视频较多的时候，如果页面一加载 ，就让它先执行播放，再执行暂停，

那场面，…………

所以此路不通。

2.各机型自带的播放器样式不统一，

找到的解决方法：

目前遇到的主要是这两个，为了兼容，找了一款插件，video.js,解决，只是用了它的初始化，

保证需求完成。至于其它的，遇到了查查文档即可。

另外，开始后台只给了视频地址，但是视频显示在页面上的时候，还需要默认设置一张视频的封面图，

查到说是可以截取视频的第一帧，然后我就按照 方法来截取

例如

 var video, output;
	output = document.getElementById("output");
	video = document.getElementById("video");
	video.addEventListener('loadeddata',captureImage);
 
	function captureImage() {
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
       var img = document.createElement("img");
        img.setAttribute('crossOrigin', 'anonymous');
        
        img.src = canvas.toDataURL("image/png");
        output.appendChild(img);
	}

在这里 获取到了base64的图片

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAADLCAYAAACbFq0rAAAFaElEQ…w/QIBAFhCMTGVIgIBg+AECBLKAYGQqQwIEBMMPECCQBR5qJwDMVFZwDwAAAABJRU5ErkJggg==

结果却无法正常显示在页面上，空白一片，什么都没有，也不报错，就是不显示。

百度谷歌之也没找到解决方法，

无奈之下，问老大，老大说截取第一 帧，这不是应该后台做的事吗，直接后台给一个img地址，前端直接用，

video和图片是不同的文件流，你这么画，不显示确实正常。

最后的解决方法，后台给地址，前端直接用。

这件事给我的教训事，前端能做就做，不能做就早点问，为了这个“ 截取H5视频的第一帧 ”,我做了一天，

浪费了时间，都没能实现。

下周的计划。

1.下周会完成一个“九宫格”抽奖的效果，就像一般的那种中奖页面，包括抽奖，显示中奖，心仪中奖信息的滚动播放

2.es6的类 class这一块 学习

参考：

移动端HTML5音频与视频问题及解决方案

http://www.cnblogs.com/aaronjs/p/4812119.html

H5项目常见问题及注意事项

https://github.com/FrontEndZQ/HTML5-FAQ

移动端HTML5

http://www.xuanfengge.com/html5-video-play.html