一：理論
1.視頻播放器的格式介紹
視頻主要有三部分組成：視頻、音頻、編碼格式
視頻格式：avi、rmb、wmv、mpeg4、ogg、webm
2.H5的標簽video的簡單使用
<video src="abc.mp4" controls="controls"></video>
或者：
<video width="300" controls="controls">
<source src="abc.mp4" type="video/mp4">
<source src="abc.ogg" type="video/ogg">
</video>
3.video的屬性
二：Demo
1.程序代碼
1 <!DOCTYPE html> 2 <head> 3 <meta charset=utf-8> 4 <title>PHP100 HTML5視頻教程-視頻播放功能</title> 5 <script src="D:\jquery\jquery-1.12.4.min.js"> 6 </script> 7 <script> 8 $(document).ready(function(){ 9 var video = $('#php100'); 10 $("#play").click(function(){ video[0].play(); }); 11 $("#pause").click(function(){ video[0].pause(); }); 12 $("#go10").click(function(){ video[0].currentTime+=10; }); 13 $("#back10").click(function(){ video[0].currentTime-=10; }); 14 $("#rate1").click(function(){ video[0].playbackRate+=2; }); 15 $("#rate0").click(function(){ video[0].playbackRate-=2; }); 16 $("#volume1").click(function(){ video[0].volume+=0.1; }); 17 $("#volume0").click(function(){ video[0].volume-=0.1; }); 18 $("#muted1").click(function(){ video[0].muted=true; }); 19 $("#muted0").click(function(){ video[0].muted=false; }); 20 $("#full").click(function(){ 21 video[0].webkitEnterFullscreen(); // webkit類型的瀏覽器 22 video[0].mozRequestFullScreen(); // FireFox瀏覽器 23 }); 24 }); 25 </script> 26 </head> 27 28 <video id="php100" controls="controls" preload="auto" poster="load.jpg" height="400"> 29 <source src="video.webm" type="video/webM" /> 30 <source src="video.ogv" type="video/ogg" /> 31 <source src="php100-html5-22-1.mp4" type="video/mp4" /> 32 你的瀏覽器不支持該播放器 33 </video> 34 35 <hr> 36 <button id="play">播放</button> 37 <button id="pause">暫停</button> 38 <button id="go10">快進10秒</button> 39 <button id="back10">快退10秒</button> 40 <button id="rate1">播放速度+</button> 41 <button id="rate0">播放速度-</button> 42 <button id="volume1">聲音+</button> 43 <button id="volume0">聲音-</button> 44 <button id="muted1">靜音</button> 45 <button id="muted0">解除靜音</button> 46 <button id="full">全屏</button> 47 48 </html>
2.效果
三：解釋程序
1.關於$(document).ready(function(){}的解釋
是頁面一初始化的時候就調用這個方法，把需要執行的邏輯寫在function方法體里
就是頁面剛開始加載時就調用 相當於js中的 body標簽的onload，在文檔加載后激活函數。
這種方式是jquery框架，封裝了瀏覽器對dom的操作。
如果我們在
$(document).ready(function(){
加入的內容
});
加入內容$(".btn-slide").click(function(){
alert("你單擊了a標簽中class等於btn-slide的連接");
});
則表示當我們單擊class=btn-slide的超級連接時彈出“你單擊了a標簽中class等於btn-slide的連接”對話框.
2.常見的jquery寫法如下：
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
$("#myId"); //(5)
第一行代碼得到所有<div>標簽下的<p>元素。第二行代碼得到class 為container的<div>元素,第三行代碼得到<div>標簽下面id為msg的元素。第四行代碼得到context為 上下文的table里面所有的連接元素。第五行代碼得到id為myid的所有元素
3.獲取video的對象方式
var video = $('#php100');
這是程序在js里寫的程序，下面做一下解釋。
第一種方式是js的原始寫法。
第二種是jquery的方式，但是獲取的是數組，要想使得對象可以使用，需要在獲取數組的第一個元素。
4.視頻對象的方法API
5.單擊事件
獲取id后，使用click獲取單擊函數。
至於函數，就是video數組里的第一個對象，使用其函數。