您的位置：首页 > Web前端 > HTML5

H5视频播放器属性与API控件，以及对程序的解释

2017-06-02 20:58 696 查看

一：理论

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航