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 = "►";//创建按钮并把按钮设置为▶样式（用转义字符） 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 = "▐▐";
play.setAttribute("paused",true);
console.log("in");
console.log(play.getAttribute("paused"));
},false);//addEventListener中的false： vid.addEventListener("pause",function(){
play.removeAttribute("paused");
play.innerHTML = "►";
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 = "►";
</script>
</body>
</html>
JavaScript取消默认控件并添加新控件（DOM编程艺术第11章）的更多相关文章
- JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...
- javascript DOM编程艺术 第10章问题记录
为什么moveElement函数调用时,必须加字符串的拼接符 var repeat = "moveElement('"+elementID+"',"+final ...
- C# DataGridView控件动态添加新行
C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...
- C# DataGridView控件 动态添加新行
DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- JavaScript DOM编程艺术（第2版）的简单总结
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
随机推荐
- VS2010与Qt5.1.0集成(非源码方式)
早就听说qt可以集成到VS中,就是一直没尝试过.一直在使用qt creator,也没觉得它有什么不好.可最近VS用多了,我发现一个qt creator中很不好的毛病,就是代码自动完成时,creator ...
- oracle sql 添加、修改数据库操作方式
年龄大了,写程序总记不住.记录一下格式: private const string SQL_INSTERT = @"INSERT INTO QS_ROOM_QUEUE (QUEUEID,RO ...
- TreeView添加图片
实现方式一: 通过代码方式实现如下所示: private string FilePath = Application.StartupPath + "\\Images\\"; Ima ...
- Intellij IDEA神器值得收藏的小技巧
概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...
- Tomcat实战-调优方案
Tomcat的默认配置,性能并不是最优的,可以通过优化tomcat以此来提高网站的并发能力.提高Tomcat的性能可以分为两个方向. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定 ...
- 【java】之获取HTTP请求的值常用方法
logger.info("销帐完成通知回调,请求URL:"+req.getRequestURI().toString()); InputStream in = req.getInp ...
- C++11--20分钟了解C++11 (下)
20分钟了解C++11 9 override关键字 (虚函数使用) * * 避免在派生类中意外地生成新函数 */ // C++ 03 class Dog { virtual void A(int); ...
- Zipkin和Brave实现http服务调用的跟踪
使用Zipkin和Brave实现http服务调用的跟踪,Brave 是用来装备Java程序的类库,提供了面向标准Servlet.Spring MVC.Http Client.JAX RS.Jersey ...
- DP 01背包 七夕模拟赛
问题 D: 七夕模拟赛 时间限制: 1 Sec 内存限制: 128 MB提交: 60 解决: 23[提交][状态][讨论版] 题目描述 " 找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手 ...
- Uc的个人中心很奇葩
Uc的个人中心很奇葩,未登录前点击头像是图2选择性别,点击云同步才是图3登录,登录之后,想退出,要点击图1的头像进入图4编辑资料,然后右上角退出登录…摸索了好久,差点抓狂…把你们的产品经理叫出来一下… ...