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

第一个问题：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. phoenix初步

    更新系统包管理工具hex mix local.hex 安装phoenix,phoenix是elixir的web框架 mix archive.install https://github.com/pho ...

  2. 测试教程网.unittest教程.3. 实例: 测试弱密码

    From: http://www.testclass.net/pyunit/test_example_1/ 背景 考虑这样一个测试弱密码的实例,这个我们在pytest相关教程中也有过描述. 我们需要判 ...

  3. [LeedCode]279. 完全平方数

    题目描述: 给定正整数 n,找到若干个完全平方数(比如 , , , , ...)使得它们的和等于 n.你需要让组成和的完全平方数的个数最少. 示例 : 输入: n = 输出: 解释: = + + . ...

  4. mac下 python3 安装--有说明原电脑安装的文件在哪里

    https://www.cnblogs.com/meng1314-shuai/p/9031686.html 前言:mac系统自带python,不过以当前mac系统的最新版本为例,自带的python版本 ...

  5. 服务网关zuul之二：过滤器--请求过滤执行过程（源码分析）

    Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求. 审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成 ...

  6. 使用StringEscapeUtils对Java中特殊字符进行转义和反转义

    https://blog.csdn.net/zdx1515888659/article/details/84966214 Java中转义字符反斜杠 \ 的代替方法 | repalceAll 内涵解析 ...

  7. dubbo协议下的单一长连接与多线程并发如何协同工作

    上班的路上突然就冒出了这么个问题:既然在dubbo中描述消费者和提供者之间采用的是单一长连接,那么如果消费者端是高并发多线程模型的web应用,单一长连接如何解决多线程并发请求问题呢? 其实如果不太了解 ...

  8. CentOS6.6下安装VMware Tools

    摘要:为了方便虚拟机和主机之间复制粘贴文件,拖拽文件,需要安装VMwareTools.下面将我的安装步骤记录如下: 第一步:打开虚拟机后,在VM的工具栏中点虚拟机,安装VMwareTools(T).. ...

  9. curl 与wget的区别

    CURL与wget的区别 当想要直接通过linux 命令行下载文件,马上就能想到两个工具:wget 和 CURL.它们有很多一样的特征,可以很轻易的完成一些相同的任务,虽然它们有一些相似的特征,但它们 ...

  10. 第7课 列表初始化（2）_分析initializer_list<T>的实现

    1. 初始化列表的实现 (1)当编译器看到{t1,t2…tn}时便会生成一个initializer_list<T>对象(其中的T为元素的类型),它关联到一个array<T,n> ...