html5 video截取视频封面图和监听播放状态代码
时间:2019-11-15 10:38:56 来源:网络收集 作者:不详 点击:次
源码授权:
免费特效
运行环境:
HTML5
源码大小:
996 KB
普通会员
一款html5 video应用:截取视频封面图和监听播放状态代码,视频截图功能。video标签有个属性poster是用来储存封面图地址的,但需注意先用本地视频,非本地视频会有跨域截取问题,这个得跟后端开发协作处理。 js代码 <script type="text/javascript"> // 视频------视频截图 ~~ 视频播放状态 ~~ const setMedia = function(video, scale = 0.8) { // 设置poster属性:(非本地视频资源会有跨域截图问题) video.addEventListener('loadeddata', function(e) { // 拿到图片 let 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); let src = canvas.toDataURL('image/png'); // 显示在dom,测试用 (function(flag = true) { if (!flag) {return;} let img = document.createElement('img'); img.src = src; document.body.appendChild(img); })(0); // 设置属性 video.setAttribute('poster', src); }); // ------------------------------------------------------------------------------------- //检测视频播放状态: //播放按钮 let playBtn = video.parentNode.childNodes[2].nextSibling; //设置状态 function vidplaySate(e) { if (video.paused) { video.play(); playBtn.classList.add('pause'); } else { video.pause(); playBtn.classList.remove('pause'); } } //点击监听 video.addEventListener('click', vidplaySate, false); playBtn.addEventListener('click', vidplaySate, false); //结束监听 video.addEventListener('ended',function () { playBtn.classList.remove('pause'); }); }; //视频: let videos = document.querySelectorAll('video'); videos.forEach((video) => { setMedia(video); }); </script> |