<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="text-align:center"> <!--一個div 包含了3個按鈕，一個視頻標籤。使用style屬性設置其爲居中--> <!--按鈕--> <button οnclick="playPause()">播放/暫停</button> <button οnclick="makeBig()">大</button> <button οnclick="makeNormal()">中</button> <button οnclick="makeSmall()">小</button> <!--Onclick= “xxx()” xxx()爲函數名字 此句爲當點擊按鈕的時候激活函數 函數需要寫在script 標籤裏--> <br/> <!--換行--> <video id="video1" width="420" style="margin-top:100px"> <!--設定ID 設定寬度 style="margin-top:100px"爲設定與上方按鈕的距離爲100像素 video 還有一個controls屬性 設置值爲 controls .可以出現一個控制開始 暫停 聲音 全屏的 按鈕條。 --> <source src="video/mov_bbb.mp4" type="video/mp4"> <!--定義視頻來源 以及類型。type不加也可以正常播放--> </video> <br/> <!--還可以將src直接放在video標籤裏，例如：--> <video src="video/mov_bbb.mp4" controls="controls"> </video> </div> <script type="text/javascript"> var myVideo = document.getElementById("video1");//定義一個元素來獲取創建的video元素 function playPause() { if (myVideo.paused) myVideo.play(); // video標籤的一種方法 else myVideo.pause();// video標籤的一種方法 } function makeBig() { myVideo.width = 560; } function makeNormal() { myVideo.width = 420; } function makeSmall() { myVideo.width = 320; } </script> </body> </html>
div標籤用來保存3個按鈕的位置。 屬性style="text-align:center" 將3個按鈕設置成居中
button標籤是按鈕，屬性οnclick="xxx()"點擊時執行的函數，函數寫在script裏.
video標籤是用來加載視頻的。id是其id，可以直接通過其width屬性來設定width值，屬性style="margin-top:100px"來設置成與上方div的間隔距離，內部的source標籤用來定義視頻的位置，以及類型。src是視頻位置，type是類型。
此外，src可以直接當成 video的屬性來使用定義視頻位置，video的屬性controls是用來設置一個控制條。
函數要寫在script標籤裏，屬性type="text/javascript"
script可以加在body標籤裏。
需要定義一個元素來獲取 視頻，用以控制視頻的各種屬性。
var myVideo = document.getElementById("video1");
這句用xx來獲取id爲id1的元素,在下邊的函數裏控制xx即可控制id1
function playPause() { if (myVideo.paused) myVideo.play(); // video標籤的一種方法 else myVideo.pause();// video標籤的一種方法 }myVideo是獲取的視頻，if(myVideo.paused)判斷視頻是否暫停，myVideo.paly()播放視頻，myVideo.pause()暫停視頻。
function makeBig() { myVideo.width = 560; }來直接修改視頻的寬度。
下邊幾個函數同理。
具體效果如下
video標籤的其他屬性:
w3鏈接 http://www.w3school.com.cn/tags/tag_video.asp