JavaScript取消默認控件並添加新控件(DOM編程藝術第11章)
阿新 • • 發佈:2019-02-04
之前 渲染 baidu ... text cli oct height 藝術
這一章實現的這個功能我研究了好久,這個思路我感覺已經是現在的我要膜拜的了,我感覺我的邏輯還是有些問題。
第一個問題: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章)