一：理论
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数组里的第一个对象，使用其函数。