这一章实现的这个功能我研究了好久, 这个思路我感觉已经是现在的我要膜拜的了, 我感觉我的逻辑还是有些问题.
第一个问题: 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);
- };
- Windows.onload = function() {
- createViedeoControls();
- };
- // var t = document.getElementById("test");
- // t.innerHTML = "►";
- </script>
- </body>
- </HTML>
JavaScript 取消默认控件并添加新控件(DOM 编程艺术第 11 章)
来源: http://www.bubuko.com/infodetail-2944689.html