这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题。
第一个问题:vid.height与vid.videoHeight
vid.height = vid.videoHeight; vid.weight = vid.videoWidth;//移除边框-配合实现无边框效果 vid.parentNode.style.height = vid.videoHeight + "px"; //将vid的父元素(那个div)也贴合vid // videoHeight和videoWidth是实际视频的尺寸,可以读取不可设置。 vid.parentNode.style.width = vid.videoWidth + "px";
最开始这两个输出的全是0(在书中的例子中并不用输出,并且可以很好的完成工作,只是我个人好奇),上网查了一些资料后,get到videoHeight要等视频加载完全,最开始我的解决方式是给video加了preload,不起作用,因为下载完<script>标签后dom继续渲染,这个时候dom结构加载好了,但是视频还没下载完脚本就已经执行了。 给脚本添加defer同理(个人理解,如有错误救救孩子指出来吧)
最后在一个贴吧帖子里看到了两位仁兄的争论,提到了用video.onload,我试了试还是不行...(应该是跟上面差不多的道理)
最后在http://www.runoob.com/jsref/event-onloadedmetadata.html这里找到了解决方法
function ol (){ console.log(vid.videoHeight+"px"); console.log(vid.height);//没有设置播放器尺寸(vid.height=vid.videoHeight)的话为0 } vid.oncanplay = ol;//解决了...不能用onload onload只是DOM加载就绪或者video标签加载就绪(?) vid.onloadedmetadata = ol;//也行
其他的问题现在想来都可以归咎于粗心或是逻辑,仔细思考思考就好了
源代码在下面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> <style> body{ text-align: center; } video{ width: 400px; height: 400px; margin-top: 100px; } </style> </head> <body> <div id="container"> <video id="video" src="https://mp4.vjshi.com/2019-01-25/cb73c06d8bebd89063b764ac60642970.mp4" controls> <a href="https://www.baidu.com">下载视频</a><!--当浏览器不支持视频时才会显示--> </video> </div> <script> //创造控件函数:对每一个video元素调用“添加控件函数” function createViedeoControls(){ var vid = document.getElementsByTagName("video"); for(var i = 0;i<vid.length;i++){ addControls(vid[i]); } } function addControls(vid){ vid.removeAttribute("controls");//移除旧的controls属性 vid.height = vid.videoHeight; vid.weight = vid.videoWidth;//移除边框-配合实现无边框效果 vid.parentNode.style.height = vid.videoHeight + "px"; //将vid的父元素(那个div)也贴合vid // videoHeight和videoWidth是实际视频的尺寸,可以读取不可设置。 vid.parentNode.style.width = vid.videoWidth + "px"; var newControls = document.createElement("div"); newControls.setAttribute("class","controls");//创建一个新的div并添加样式 这个时候它还是文档碎片 var play = document.createElement("button"); play.setAttribute("title","play"); play.innerHTML = "►";//创建按钮并把按钮设置为?样式(用转义字符) newControls.appendChild(play);//将button插入到新的div里 vid.parentNode.insertBefore(newControls,vid);//insert()方法的使用: // parentElement.insertBefore(newElement,targetElement),在vid的父容器中,将newControls插入到vid之前 //我不是很理解,为什么是之前 改成之后吧,并且给newControls多加一些样式 play.onclick = function(){ if(vid.ended){ vid.currentTime = 0; } if(vid.paused){ vid.play(); }else{ vid.pause(); } }; vid.addEventListener("play",function(){ play.innerHTML = "▐▐"; play.setAttribute("paused",true); console.log("in"); console.log(play.getAttribute("paused")); },false);//addEventListener中的false: vid.addEventListener("pause",function(){ play.removeAttribute("paused"); play.innerHTML = "►"; console.log("in"); },false); vid.addEventListener("ended",function(){ vid.pause(); console.log("in"); },false); }; window.onload = function(){ createViedeoControls(); }; // var t = document.getElementById("test"); // t.innerHTML = "►"; </script> </body> </html>
原文地址:https://www.cnblogs.com/linbudu/p/10351598.html
时间: 2024-10-10 13:24:54