javascript html设置视频预览图 -凯发k8官方网

第一种：

设置video属性poster

 第二种：

设置视频第一帧为预览图

html代码：（调整output的left和top，覆盖在video上）

 javascript代码：

var video, output; var scale = 0.6; var initialize = function() {output = document.getelementbyid("output");video = document.getelementbyid("video");video.addeventlistener('loadeddata',captureimage); };var captureimage = function() {var canvas = document.createelement("canvas");
canvas.width = video.videowidth * scale；
canvas.height = video.videoheight* scale；
canvas.getcontext('2d').drawimage(video, 0, 0, canvas.width, canvas.height);
var img = document.createelement("img");
img.src = canvas.todata;
output.appendchild(img); };initialize();

 output将在视频加载完成后显示第一帧，可以在播放时将output隐藏

问题：

canvas绘制图片，由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的图片资源，那么在todata时会抛出安全异常：

uncaught securityerror: failed to execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not be exported

 

 解决方法：

1、将视频放在当前域下。

2、访问的服务器允许，资源跨域使用，也就是说设置了cors跨域配置，access-control-allow-origin。

     然后在客户端访问图片资源的时候添加

img.setattribute('crossorigin', 'anonymous');

 

 

转载于:https://www.cnblogs.com/zella/p/7117851.html

总结

以上是凯发k8官方网为你收集整理的javascript html设置视频预览图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。