JavaScript取消默认控件并添加新控件(DOM编程艺术第11章)

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

第一个问题: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>

原文地址:https://www.cnblogs.com/linbudu/p/10351598.html

时间: 2024-10-10 13:24:54

JavaScript取消默认控件并添加新控件(DOM编程艺术第11章)的相关文章

JavaScript Dom编程艺术 第6章的一个错误

今天在看JavaScript Dom编程艺术 第6章:图片库的改进版时:按照书上的代码,敲出来运行,确怎么也不能显示出正确的结果.加进去断点,调试,发现:prepareGallery 函数根本没被调用,而prepareGallery函数是绑定到window.onLoad事件上的,于是仔细检查书上代码,发现,window.onLoad = prepareGallery;后边少加了个括号.加上括号之后,结果正确.改正后的代码如下: 1 function addLoadEvent(func){ 2 v

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

为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; // var repeat = "moveElement('"elementID"',"final_x","final_y&

C# DataGridView控件动态添加新行

C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行,方法有很多种,下面简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1.Rows[index].Cells[

C# DataGridView控件 动态添加新行

DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行,方法有很多种,下面简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1.Rows[index].Cells[0].Value = "1"; thi

JScrollPane控件中添加其他控件的问题&&JScrollPane设置滚动条&&调整滚动速度

如果要在JScrollPane控件中添加其他控件,不能用下面这种方法 JScrollPane j = new JScrollPane();j.add(new JButton("点击")); 只能通过以下方法添加 JScrollPane j = new JScrollPane(new JButton("点击")); 或者 JScrollPane j = new JScrollPane();j.getViewport().add(new JButton("点击

《JavaScript+DOM编程艺术》的摘要(五)-----添加insertAfter

在JS原生里面,没有提供insertAfter这个方法,不过我们可以利用appendChild.insertBefore.parentNode这些方法创建一个insertAfter方法,代码如下: function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newEle

JavaScript DOM编程艺术学习笔记(一)

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript DOM编程艺术第一章:JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap