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

第一个问题：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. 利用curl 模拟多线程

    所谓多线程就是多个 程序同时运行,单线程:执行一段逻辑,等待完成后 在执行另外一个. 多线程:几个逻辑同时进行处理,不需要相互等待,提高了总的执行时间 接下来就用curl实现多线程 实现逻辑 1. f ...

  2. PHP 如何自定义函数

    PHP 如何自定义函数 使用Function来自定义一个函数:格式如下:function function_name( $data ){ /** * 函数操作 */}注意:函数命名和自定义变量一样.只 ...

  3. windows 下跟踪日志的几个工具总结

    1.baretailpro.exe 2.wintail.exe 3.vim(using tail bundle plugin) 4.Notepad++ (Plugin->Plugin Manag ...

  4. .NET使用Task动态创建多任务多线程并行程序计算Redis集群keys计算

    Task是一个很好用的多任务处理类,并且通过Task可以对任务进行很好的控制. 下面将通过代码实现Redis集群在使用IServer.keys时通过多任务对多个服务器示例进行并行计算,并对返回key做 ...

  5. SQL Server的分页优化及Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  6. P2871 手链

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

  7. springboot工程添加404页面

    首先在/src/main/resources下创建文件夹/public/error 在文件夹里创建html页面,jsp页面不可以. <html> <body> <img ...

  8. mysql监测工具

    可视性是系统设计的最佳境界,MySQL 也不例外.一旦完成了 MySQL 环境的搭建.运行并调优,您千万不要认为已经万事大吉了. 数据库环境既会受到来自系统更改或流量负荷的影响,也会遇到例如流量高峰. ...

  9. spring4.3新注解之：@RequestMapping变种（@GetMapping,@PostMapping,@PutMapping,@DeleteMapping,@PatchMapping）

    Spring 4.3 中引进了下面的注解 @RequestMapping 在方法层级的变种,来帮助简化常用 HTTP 方法的映射,并更好地表达被注解的方法的语义.比如,@GetMapping可以读作 ...

  10. 服务注册发现consul之二：在Spring Cloud中使用Consul实现服务的注册和发现

    首先安装consul环境,参照之前的文章:<服务注册发现consul之一:consul介绍及安装>中的第一节介绍. Spring Cloud使用Consul的服务与发现 1.导入依赖pri ...