分类
<style> .video-con{ width: 300px; height: 150px; position: relative; margin-bottom: 20px;} .video-con .video{ width: 100%; height: 100%;} .video-con .btn{ width: 64px; height: 64px; background: transparent url("img/play-btn.png") no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: none; } .video-con .btn.pause{ background-image: url("img/pause-btn.png");} </style>
<div class="video-con"> <video class="video" poster=""> <source src="mp4/1.mp4" > </video> <button type="button" class="btn js-play-btn"></button> </div> <!--html5的video--> <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>
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。