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

第一个问题：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. IIS - 自动申请、部署Let's Encrypt的免费SSL证书（让网站实现HTTPS协议）

    IIS - 自动申请.部署Let's Encrypt的免费SSL证书(让网站实现HTTPS协议) 2017-12-19发布:hangge阅读:161   一.HTTPS 协议介绍 1,什么是 HTTP ...

  2. IIS7.0 下使用Intelligencia.UrlRewriter时Session为空问题

    背景 新年伊始,本人的开发环境由Windows Server 2003 +IIS 6 升级成了 Windows Server 2008 +IIS 7,之后便着手参加新项目的开发.项目开发后期测试过程中 ...

  3. Python单元测试框架之pytest 1 ---如何执行测试用例

    From: https://www.cnblogs.com/fnng/p/4765112.html 介绍   pytest是一个成熟的全功能的Python测试工具,可以帮助你写出更好的程序. 适合从简 ...

  4. Ubuntu 14.10 下HBase错误集

    1 如果机群时间不同步,那么启动子节点RegionServer就会出问题 aused by: org.apache.hadoop.hbase.ipc.RemoteWithExtrasException ...

  5. PAT 乙级 1048 数字加密(20) C++版

    1048. 数字加密(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求实现一种数字加密方法.首先固 ...

  6. Spring4.0之四：Meta Annotation（元注解）

    Spring框架自2.0开始添加注解的支持,之后的每个版本都增加了更多的注解支持.注解为依赖注入,AOP(如事务)提供了更强大和简便的方式.这也导致你要是用一个相同的注解到许多不同的类中去.这篇文章介 ...

  7. 字符串分割split()

    知识讲解: split() 方法将字符串分割为字符串数组,并返回此数组. 语法: stringObject.split(separator,limit) 参数说明: 注意:如果把空字符串 (" ...

  8. 信息安全-加密：RAS 加密

    ylbtech-信息安全-加密:RAS 加密 1.返回顶部 1. RSA 是不对称的加密(加密密钥和解密密钥不同  其中 一个为公钥,一个为私钥): 公钥和私钥的产生是基于一对很大的素数(十进制来说 ...

  9. Oracle之ora-01031 insufficient privileges

              解决ora-01031insufficient privileges错误 解决system用户不能登录的问题 alter user system account unlock id ...

  10. Jmeter（二十三）Jmeter-Question之“批量造数据”

    日常工作中,无论是在做功能测试.接口测试还是性能测试,经常会有这么一个场景出现,“那个谁谁谁,帮我加几条订单”,“那个某某某,给购物车增添几个产品”,“在数据库加几百条数据”...等等,通常少数量,或 ...