html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.

实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!

DEMO DOWNLOAD

HTML5 Video 基础标签

1 video id=myVideo controls poster=video.jpg width=600 height=400

2 source src=video.mp4 type=video/mp4 /

3 source src=video.webm type=video/webM /

4 source src=video.ogv type=video/ogg /

5 pYour browser does not support the video tag./p

6 /video

video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！

开始制作 HTML5 Video Controls

幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.

在编码之前让我简单的介绍一下jQuery是如何获取video标签的.

在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$(videoID)会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.

1 //return a DOM object

2 var video = document.getElementById('videoID'); //or

3 var video = $('#videoID').get(0); //or

4 var video = $('#videoID')[0];

5

6 //return a jQuery object

7 var video = $('#videoID');

Video Play/Pause Controls 播放/暂停 按钮

好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.

1 div class=control

2 a href=# class=btnPlayPlay/Pause/a

3 /div

我们可以轻松的控制Html5 Video的播放与暂停状态.

1 //Play/Pause control clicked

2 $('.btnPlay').on('click', function() {

3 if(video[0].paused) {

4 video[0].play();

5 }

6 else {

7 video[0].pause();

8 }

9 return false;

10 };

取消

评论