这一章实现的这个功能我研究了好久，这个思路我感觉已经是现在的我要膜拜的了，我感觉我的逻辑还是有些问题。

第一个问题：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 = "&#x25BA";//创建按钮并把按钮设置为▶样式（用转义字符）

            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 = "▐&#x2590";

                play.setAttribute("paused",true);

                console.log("in");

                console.log(play.getAttribute("paused"));

            },false);//addEventListener中的false：

            vid.addEventListener("pause",function(){

                play.removeAttribute("paused");

                play.innerHTML = "&#x25BA";

                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 = "&#x25BA";

    </script>

</body>

</html>

JavaScript取消默认控件并添加新控件（DOM编程艺术第11章）的更多相关文章

  1. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  2. javascript DOM编程艺术 第10章问题记录

    为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...

  3. C# DataGridView控件动态添加新行

    C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...

  4. C# DataGridView控件 动态添加新行

    DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...

  5. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  6. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  8. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  9. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

  1. ROS学习材料/链接

    ROS的3D模型建立:http://blog.csdn.net/sujun3304/article/details/18962719 ubuntu14 ROS安装:http://blog.csdn.n ...

  2. tomcat源码 分析 Catalina

    通过查看分析启动脚本,发现最终调用的入口是org.apache.catalina.startup包下面的Bootstrap#main public static void main(String ar ...

  3. PHP 数据运算类型都有哪些?

    四种标量类型:布尔型 boolean $bo=TRUE; $bo=FALSE;整型 integer  $bo=1; $bo=-12;浮点型 float/double  $bo=1.001; $bo=3 ...

  4. Qt应用程序单实例化

    在实际应用中,我们经常需要让应用程序只有一个实例,再打开新的文档或者页面时,只是替换现在的窗口或者新打开一个标签,而不是重新启动一次应用程序.Qt中是否可以做到这样呢,答案是肯定的,因为Qt本身可以直 ...

  5. Maven编译错误记录:Some Enforcer rules have failed

    一.错误信息 添加httpclient与httpcore依赖后编译Maven报错. 错误信息如下: Failed to execute goal org.apache.maven.plugins:ma ...

  6. Python实现简单的网页抓取

    现在开源的网页抓取程序有很多,各种语言应有尽有. 这里分享一下Python从零开始的网页抓取过程 第一步:安装Python 点击下载适合的版本https://www.python.org/ 我这里选择 ...

  7. P1033自由落体

    传送 杯具wa,惨痛的教训————别写一些情况多到要打表的判断,写着写着就wa了 这个题,我主要死在判断上了 第一遍20分的思路:看小车此时跨越几个整数点.因为我求出了此时小车的车头坐标和车尾坐标.然 ...

  8. P2871 手链

    传送 这个题的数据限制没有翻译出来,所以有可能产生爆内存现象 再此翻译一下:1<=n(物品个数)<=3402,1<=M(总重量)<=12880 (就这两个有点用) 显然这是一个 ...

  9. 峰Redis学习（2）Jedis 入门实例

    参考博客:http://blog.java1234.com/blog/articles/314.html 第一节:使用Jedis 连接Redis 新建maven项目: pom.xml: <pro ...

  10. Service Mesh简介

    1.1 Service Mesh   1.1.1 什么是Service Mesh Service Mesh是最近才兴起的一个名词,最早在2016年9月29日由开发Linkerd的Buoyant公司首次 ...