video标签在chrome、安卓浏览器、safari默认展示的poster不同。
chrome会自动获取第一帧作为封面，目前遇到的safari同chrome。安卓浏览器中，不设置poster时，显示为空，整个播放器区域黑乎乎一片。
H5中的video标签最好设置poster值，如果只提供了视频链接，可尝试下canvas方法获取第一帧，将其转化为图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!-- html部分 -->
<div id="box">
<input type="file" id="file" onchange="changeFileUrl()">
<video src="" id="video"></video>
</div>
<!-- js部分 -->
var $box = document.getElementById('box');
var $video = document.getElementById('video');
var $file = document.getElementById('file'); // 获取dom节点
function changeFileUrl(){
var url = URL.createObjectURL($file.files[0]);
$video.src = url;
}
var cutCover = function(){
// 创建canvas元素
var canvas = document.createElement('canvas');
// 设置canvas宽高度，如果宽高为0，绘制出的url将为空：“data:,”
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 创建img元素
var img = document.createElement('img');
// 使用toDataURL时可能会报错，跨域导致
// Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
// 使用crossOrigin解决，需要结合CORS响应头，IE11+、chrome、safari、Firefox
img.crossOrigin = "Anonymous";
img.src = canvas.toDataURL("image/png");
$box.append(img);
}
//
$video.addEventListener('loadeddata',cutCover);
|
