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

最新推荐文章于 2024-10-14 14:05:20 发布

木偶小小

最新推荐文章于 2024-10-14 14:05:20 发布

阅读量3.2w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/sunny_810/article/details/53841573

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

想到的处理办法：

最开始直接用的h5的<video>标签，定义了<preload="metadata"> 加载元数据，

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

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

所以这个问题必须解决，

遇到的问题：

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

preload="metadata"

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

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

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone) {
    $videoTag = '<video controls autoplay preload="metadata">';
} else {
    $videoTag = '<video controls preload="metadata">';
}

再调用的时候

判断如果是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音频与视频问题及解决方案