video.js中文文檔（二）：嵌入video.js

video.js中文文檔（二）：嵌入video.js播放器

ideo .js是對HTML5 video標簽的一個增強，多年來，它的嵌入代碼一直只是一個<video>元素。video .js將video標簽包裝在一個div中，用于放置其他控件和播放器需要的東西。

很長一段時間以來，這些已經足夠了。不過在2016年我們添加了“div ingest”，它允許開發者給video.js播放器一個div來使用，而不需要自己制作。這在一定程度上將有助于內容回流優化，也有助于在IOS上，我們的播放器區域重新創建的視頻元素時，有時你需要重新創建video標簽。然而，<video>標簽被div元素所包裹是有點奇怪的。因此，我們構建了<video-js>的全新嵌入方式。

下面詳細介紹了這三種嵌入方式。

<video>嵌入

這種類型的嵌入，你可以通過date-setup或者videojs方法初始化它。

<!-- via data-setup -->
<video id="vid1" class="video-js" data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>

<!-- via code -->
<video id="vid1" class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>

const player=videojs('vid1', {});

播放器div ingest

增強方式的嵌入，你可以通過date-setup或者videojs方法初始化它。

<!-- via data-setup -->
<div data-vjs-player>
  <video id="vid1" class="video-js" data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4">
  </video>
</div>

<!-- via code -->
<div data-vjs-player>
  <video id="vid1" class="video-js">
    <source src="//vjs.zencdn.net/v/oceans.mp4">
  </video>
</div>

const player=videojs('vid1', {});

如你所見，他與傳統的<video>嵌入沒有太大的不同，但他讓React（https://videojs.com/guides/react/）更容易使用。

<video-js>嵌入

這是《I Can't Believe It's Not Custom Elements》（https://developers.google.com/web/fundamentals/web-components/customelements）嵌入代碼。它看起來非常像<video>的嵌入，但他不是<video>，而是<video-js>的嵌入。這在所有的播放器div ingest都是有用的，它會匹配我們的庫名稱。

<!-- via data-setup -->
<video-js id="vid1" data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video-js>

<!-- via code -->
<video-js id="vid1">
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video-js>

const player=videojs('vid1', {});

這種方式不再需要手動去添加class="video-js"這個類，如果缺少，就會自動去添加。

自定義標簽

根據Can I Use（https://caniuse.com/custom-elementsv1），本地自定義元素的支持相對較小，因為我們不想包含polyfill，所以我們只使用一個名為video-js的元素，而不是一個完整的自定義元素。

data-setup

這個屬性讓video.js播放器設置一些自動屬性變的非常簡單，這是一個HTML屬性，它以一個JSON字符串作為播放器選項的值，這個方法使用容易，用于編程更加方便。

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

Element類型用于表示XML或HTML元素，提供了對元素標簽名、子節點及特性的訪問；

Element類繼承自Node接口；它繼承了Node接口中的所有屬性和方法，比如parentNode、childNode等；同時，它在Node接口的基礎上擴展了自己的屬性和方法；

Element類型的特征：

nodeType值為1；
nodeName的值為元素的標簽名；
nodeValue的值為null；
parentNode可能是Document或Element；
其子節點可能是Element、Text,Comment、ProcessingInstruction、CATASection或EntityReference；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.nodeType);  // 1
console.log(mydiv.nodeName);  // DIV
console.log(mydiv.nodeValue);  // null
console.log(mydiv.parentNode);  // <body>
console.log(mydiv.childNodes);  // NodeList

Element的屬性：

id屬性：表示元素的標識符，與全局屬性id對應；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.id);
mydiv.id="yourdiv";
console.log(mydiv.id);
var yourdiv=document.getElementById("yourdiv");
console.log(yourdiv.id);

tagName屬性：與nodeName屬性一樣，可以返回元素的標簽名，在HTML文檔中返回大寫，在XML中返回原生，因此在使用tagName時，最后使用toLowerCase()轉換；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.tagName);  // DIV
if(mydiv.tagName.toLowerCase()=="div"){
    //...
}

一般使用tagName，因為從字義上理解更加清晰；

Element的子類型HTMLElement：

HTMLElement類型直接繼承自Element，因此，HTML元素即屬于HTMLElement類也屬于Element類；

所有HTML元素都由HTMLElement類型或其子類型表示，比如：HTMLDIVElement，就是具體的div元素的類型；

HTMLElement類型在Element類的基礎上，并添加了一些屬性，這些屬性分別對應于每個HTML元素中都存在的標準特性：id、title、lang、dir、className；

這些屬性都是可讀可寫的，并且也是動態的；

<div id="mydiv" name="mydiv" title="DIV" lang="en" dir="ltr" class="divclass">
// …
<script>
var mydiv=document.getElementById("mydiv");
console.log(mydiv.id);
console.log(mydiv.title);
console.log(mydiv.lang);
console.log(mydiv.dir);
console.log(mydiv.className);
mydiv.id="yourdiv";
mydiv.title="你的DIV";
mydiv.lang="fr";
mydiv.dir="rtl";
mydiv.className="reddiv";
</script>

Element特性（屬性）：

每個元素都有若干個特性，這些特性的用途是給出相應元素或其內容的附加信息；DOM為Element對象定義了一些API來獲取或設置這些XML或HTML屬性(特性)；

操作特性主要有三個方法：

getAttribute()、setAttribute()、removeAttribute()；這些方法可以針對任何特性使用，包括那些以HTMLElement類型屬性的形式定義的特性；

getAttribute(attributeName)方法：

返回元素上一個指定的特性值，如果指定的特性不存在，則返回null或 ""；特性的名稱不區分大小寫；

如果取得class，需要傳入class，而不是className；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.getAttribute("id"));  // mydiv
console.log(mydiv.getAttribute("class"));  // divclass
console.log(mydiv.getAttribute("title"));  // null

也可以取得自定義特性(即不是HTML元素的標準特性)，但要注意，根據HTML5的規范，自定義特性應該加上data-前綴以便驗證；

console.log(mydiv.getAttribute("custom"));  // customvalue
console.log(mydiv.getAttribute("data-name"));  // wangwei

任何元素的所有特性，都可以通過DOM元素本身的屬性來訪問，不過，只有公認的(非自定義)特性才會以屬性的形式添加到DOM對象中；但IE可以為自定義特性創建屬性；

console.log(mydiv.id);
console.log(mydiv.className);
console.log(mydiv.myname);  // undefined
console.log(mydiv.align);  // left，認為align是公認的
var img=document.getElementById("myimg");
var imgurl=img.src;
console.log(img.id==="myimg");
var f=document.forms[0];
f.action="https://www.zeronetwork.cn/do.php";
f.method="POST";

HTML屬性名不區分大小寫，但Javascript屬性名則大小寫敏感；從HTML屬性名轉換到Javascript屬性名應該采用小寫，但是如果屬性名包含不止一個單詞，則采用小駝峰式，如：defaultCheded和tabIndex；

有些HTML屬性名在Javascript中是保留字，對于這些屬性，一般的規則是為該屬性名加前綴”html”，如，HTML的for屬性在Javascript中變為htmlFor屬性，class屬性比較特殊，它在Javascript中變成className屬性；

表示HTML屬性的值通常是字符串，但當屬性為布爾值或數值時，Javascript中對應的屬性也是布爾值或數值，而不是字符串；

<label id="lbInput" for="txtInput">文本框：</label>
<input id="txtInput" tabindex="2" type="text" readonly />
<script>
var txtInput=document.getElementById("txtInput");
console.log(txtInput.tabIndex);  // 1
console.log(txtInput.readOnly);  // true
var lbInput=document.getElementById("lbInput");
console.log(lbInput.htmlFor);  // txtInput
</script>

style和事件處理程序特性：

style：在通過getAttribute()訪問時，返回的style特性值中包含的是CSS文本；而通過屬性訪問它會返回一個CSSStyleDeclaration對象（由于style屬性是用于以編程方式訪問元素樣式的對象，因此并沒有直接映射到style特性，有關CSS編程，后面我們會講到）；

事件處理程序特性，類似于onclick等這樣的事件處理程序，當在特性中使用時，onclick中包含的就是JS代碼，使用getAttribute(）會返回相應的代碼的字符串，但在訪問onclick屬性時，會返回一個Javascript函數；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.getAttribute("style")); // font-size: 14px;color:red;
console.log(mydiv.style); // CSSStyleDeclaration or CSS2Properties
console.log(mydiv.getAttribute("onclick"));  // alert('zeronetwork');
console.log(mydiv.onclick); // function onclick(event)

setAttribute(name, value)方法：

設置指定元素上的某個特性值，如果特性已經存在，則更新該值，否則，使用指定的名稱和值添加一個新的特性；

該接受兩個參數：要設置的特性名和值；

此方法可以操作HTML特性也可以操作自定義特性；

var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("id","outerdiv");
mydiv.setAttribute("class","outerdivclass");
mydiv.setAttribute("title","mydiv title");
mydiv.setAttribute("style","border-bottom:1px solid;color:purple;");
mydiv.setAttribute("custom","custom value");
console.log(mydiv.title);  // mydiv title
console.log(mydiv.custom);  // undefined

通過該方法設置的特性名會被統一轉換成小寫形式，即“ID”最終會變成“id”；

mydiv.setAttribute("ID","myID");  // id
mydiv.setAttribute("CID","customID");  // cid

布爾特性只要出現在元素上就會被認為是 true，無論它的值是什么；一般來說，應該將 value 設置為空字符串，也有人使用這個屬性的名稱作為值，雖然不會出現什么問題，但不規范的；

var txtInput=document.getElementById("txtInput");
txtInput.setAttribute("readonly",true);// 會渲染成readonly="true"
txtInput.setAttribute("readonly",""); // 渲染成readonly
console.log(txtInput.readOnly);  // true

因為所有特性都是屬性，所以直接給屬性賦值可以設置特性的值，但如果添加的是一個自定義的屬性，該屬性不會自動成為元素的特性；

mydiv.title="mydiv title";
mydiv.style="border-bottom:1px solid;color:purple;";
mydiv.custom="custom value";  // html中并沒有渲染custom
console.log(mydiv.title);  // mydiv title
console.log(mydiv.custom);  // custom value
console.log(mydiv.getAttribute("title")); // mydiv title
console.log(mydiv.getAttribute("custom")); // null

可以通過setAttribute()方法設置class，但不能通過屬性設置class，因為class是關鍵字，需要className進行屬性設置；

var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("class","att_class");
// mydiv.class="att_class";  // 無效,class是保留字
mydiv.className="att_class";
console.log(mydiv.class);  // undefined
console.log(mydiv.className);  // att_class

removeAttribute(attrName)方法：

用于從指定的元素徹底刪除元素的特性；

此方法不僅會清除特性的值，而且也會從元素中完全刪除特性；

此方法并不常用，但在序列化DOM元素時，可以通過它來確切地指定要包含哪些特性；

var mydiv=document.getElementById("mydiv");
mydiv.removeAttribute("class");
mydiv.removeAttribute("style");
mydiv.setAttribute("custom","custom_value");
mydiv.removeAttribute("custom");
mydiv.title="mydiv title";
mydiv.removeAttribute("title");

hasAttribute(attrName)方法和hasAttributes()方法：

用于檢測特性是否存在；其中hasAttribute()需要一個特性參數，判斷該元素是否包含有指定的特性，而hasAttributes()檢測的是否有特性，具體是什么特性，則不是它所關心的了；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.hasAttribute("title"));
if(!mydiv.hasAttribute("align"))
    mydiv.setAttribute("align","center");
console.log(mydiv.hasAttributes());  // true

當屬性為布爾值時，hasAttribute()方法特別有用，比如HTML表單的disabled屬性，只要判斷它有沒有這個屬性即可，不用管它的值；

attributes屬性：

返回該元素所有屬性節點的一個實時集合，該集合是一個NamedNodeMap對象，是一個只讀的類數組對象，只有Element類型擁有；該屬性與NodeList類似，也是一個動態的集合；也可以使用索引方式訪問，并且可以枚舉；

元素的每個特性都由一個Attr節點表示，Attr對象是一個特殊的Node，不會像普通的Node一樣去使用；Attr的name和value屬性返回該屬性的名字和值；

每個Attr節點都保存在NamedNodeMap對象中；此節點都有nodeName、nodeValue等屬性，nodeName就是特性的名稱，nodeValue就是特性的值；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.attributes);
console.log(mydiv.attributes[1]);
console.log(mydiv.attributes.title);
console.log(mydiv.attributes.custom);
mydiv.attributes.title="wangwei";  // 無效
console.log(mydiv.attributes[1].nodeType);  // ATTRIBUTE_NODE
console.log(mydiv.attributes[1].nodeName);
console.log(mydiv.attributes[1].nodeValue);

NamedNodeMap對象：

表示一個無順序的屬性節點 Attr 對象的集合；其是類數組對象，同時也是動態的；

屬性和方法：

length屬性：返回映射(map)中對象的數量；

getNamedItem(name)：返回給定名稱name的屬性節點；

item(pos)：返回位于數字pos位置處的節點；(注：各個瀏覽器會返回不同的順序)；

setNamedItem(node)：向列表中添加或替換特性節點；

removeNamedItem(name)：從列表中移除特性為name的節點；與removeAttribute()相同，但其會返回被刪除的特性(Attr)節點；

可以通過attributes屬性使用方括號直接訪問特性；

var mydiv=document.getElementById("mydiv");
console.log(mydiv.attributes);
console.log(mydiv.attributes.item(1));
console.log(mydiv.attributes.getNamedItem("name"));
console.log(mydiv.attributes[1]);
console.log(mydiv.attributes["name"]);
mydiv.attributes["id"].nodeValue="newID";
mydiv.attributes.getNamedItem("name").nodeValue="newName";
var deleteStyle=mydiv.attributes.removeNamedItem("style");
console.log(deleteStyle);
var yourdiv=document.getElementById("yourdiv");
yourdiv.attributes.setNamedItem(deleteStyle);
var attr=document.createAttribute("dir");
attr.nodeValue="ltr";
mydiv.attributes.setNamedItem(attr);

使用attributes屬性較麻煩，因此使用getAttribute()、removeAttribute()和removeAttribute()方法比較常用；但在遍歷元素的特性時，attributes屬性比較方便；

遍歷attributes屬性：

在需要將DOM結構序列化為XML或HTML字符串時，多數都會涉及遍歷元素特性；

// 迭代元素的所有特性，構造成name=”value” name=”value”這樣的字符串格式
var mydiv=document.getElementById("mydiv");
function outputAttributes(element){
    var pairs=new Array();
    for(var attr in element.attributes){
        if(element.attributes[attr] instanceof Attr){
            // console.log(attr + element.attributes[attr]);
            var attrName=element.attributes[attr].nodeName;
            var attrValue=element.attributes[attr].nodeValue;
            // console.log(attrName);
            pairs.push(attrName + "=\"" + attrValue + "\"");
        }
    }
    // 或者使用for循環
    // for(var i=0,len=element.attributes.length; i<len; i++){
    //     var attrName=element.attributes[i].nodeName;
    //     var attrValue=element.attributes[i].nodeValue;
    //     // console.log(attrName);
    //     pairs.push(attrName + "=\"" + attrValue + "\"");
    // }
    return pairs.join(" ");
}
console.log(outputAttributes(mydiv));

創建Element元素：

document.createElement(tagName)方法：用于創建一個由標簽名稱tagName指定的HTML元素，如果用戶代理無法識別tagName，則會生成一個未知 HTML 元素；

該方法只接受一個參數，即要創建元素的標簽名；此標簽名在HTML中不區分大小寫，在XML(包括XHTML)中，是區分大小寫的；

在創建新元素的同時，也為新元素設置了ownerDocument屬性；同時還可以操作元素的特性，為它添加子節點，以及執行其他操作；

新創建的元素，必須添加到文檔樹中，才能顯示出來，可以利用appendChild，insertBefore()或replaceChild()方法；

var div=document.createElement("div");
div.innerHTML="<h2>零點程序員</h2>";
div.id="outerDiv";
div.className="outerDiv";
div.setAttribute("style","color:green;");
console.log(div.ownerDocument);
document.body.appendChild(div);
var h3=document.createElement("h3");
h3.setAttribute("onclick","alert('this is zeronetwork');");
h3.innerText="zeronetwork";
div.insertBefore(h3, null);

Element的子節點：

元素可以有任意數目的子節點和后代節點，這些子節點可能是元素、文本、注釋處處理指令；但HTML中的空白也會被解析為文本節點；因此在執行某項操作時，要先檢查一下nodeType屬性；

<!-- 結構 -->
<ul id="myList">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>
<!-- 或者刪除空白 -->
<ul id="myList"><li>HTML</li><li>CSS</li><li>Javascript</li></ul>
// js代碼
var myList=document.getElementById("myList");
console.log(myList.childNodes.length);
for(var i=0,len=myList.childNodes.length; i<len; i++){
    if(myList.childNodes[i].nodeType==Node.ELEMENT_NODE)
        console.log(myList.childNodes[i].nodeName);
}
// 或者
// for(var n in myList.childNodes){
//     if(myList.childNodes[n].nodeType && myList.childNodes[n].nodeType==Node.ELEMENT_NODE)
//         console.log(myList.childNodes[n].nodeName);
// }

元素節點也支持getElementsByTagName() 方法，可以通過它獲得某個特定的標簽名的子節點或后代節點；

var myList=document.getElementById("myList");
var lis=myList.getElementsByTagName("li");
console.log(lis);  // dom.html:23 HTMLCollection(3)

自定義Element的方法：

Element和HTMLDocument等類型都像String和Array一樣是類，它們不是構造函數，但它們有原型對象，可以自定義方法擴展它；

Element.prototype.next=function(){
    if(this.nextElementSibling) return this.nextElementSibling;
    var sib=this.nextSibling;
    while(sib && sib.nodeType !==1) sib=sib.nextSibling;
    return sib;
}
console.log(document.getElementById("mydiv").next());

Web前端開發之Javascript-零點程序員-王唯

何引入javascript腳本代碼

1 通過<script></script>標記對導入

document.write("Hello World!");

</script>

2 通過<script></script>標記src屬性導入

test.js文件內容

document.write("Hello World!");

3 通過javascript偽URL引入

<input type="text" name="MyText" value="鼠標點擊"

onclick="javascript：alert('鼠標已點擊文本框!')">

</form>

注意: "javascript："可以省略

4 通過HTML文檔事件處理程序引入

function ClickMe()

{

alert("鼠標已單擊按鈕");

}

</script>

</form>

單引號和雙引號的問題解決:

var username="xuchenkai";

onclick='show(\""+username+"\")'

function ClickMe(username)

{

alert("鼠標已單擊按鈕"+username);

}

以上javascript腳本代碼可以簡化為

document.write("Hello World!");

</script>

注意:javascript腳本標簽中type屬性是必須的

加載腳本位置<head></head>和<body></body>標記之間的位置

language：使用的語言腳本, 早期方式

type：使用的語言腳本, 主流方式

編寫JavaScript的流程

布局：HTML+CSS

屬性：確定要修改哪些屬性

事件：確定用戶做哪些操作(產品設計)

編寫JavaScript：在事件中，用JavaScript來修改頁面元素的樣式

如何將html代碼封裝(轉換)成JS實現調用?

步驟一：打開Dreamweaver或者類似軟件，事先寫好需要封裝的HTML代碼。

步驟二：打開站長工具里面的HTML/JS轉換頁面, 將需要封裝的HTML代碼轉換成JS代碼

將HTML代碼字符引號前加上"\"(相當于addslashes()函數), 包含在document.writeln("")方法中。

如: document.writeln("<table id=/"tab1/"border=/"1/"width=/"500/"><tbody><tr><td>1</td><td>Blue</td><td>27</td></tr><tr><td>2</td><td>張三</td>

<td>23</td></tr><tr><td>3</td><td>李四</td><td>28</td></tr><tr><td>4</td><td>王五</td><td>25</td></tr><tr><td>5</td><td>張偉</td><td>24</td></tr></tbody></table>");

步驟三：在Dreamweaver中新建一個JS文件, 將轉換后的JS代碼復制粘貼進去，保存為banner.js文件。

步驟四：加載banner.js

在線咨詢

上一篇：三種快速搞定Linux文件批量重命名的方法
下一篇：Javascript怎樣訪問Sqlserver數據庫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

video.js中文文檔（二）：嵌入video.js

<video>嵌入

播放器div ingest

<video-js>嵌入

自定義標簽

data-setup

您的項目需求