html5 控件事件,HTML5 视频播放事件属性与API控件

在过去，我们如果想在web上播放视频，也是都是通过flash来播放，同样并不是所有的都安装了flash播放器插件，而现在我们在html5中，就能完全脱离flash或其他的插件来播放视频了

1、视频格式的简单介绍

视频格式：avi、rmb、wmv、mpeg4、ogg、webm

视频主要有三部分组成：视频、音频、编码格式

html5支持的格式：

ogg= 带有 theora 视频编码和 vorbis 音频编码的 ogg 文件

mpeg4= 带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件

webm = 带有 vp8 视频编码和 vorbis 音频编码的 webm 文件

2、html5视频标签属性

浏览器不支持html5的视频播放功能

3、html5视频api控件

获得video标签，这里是dom对象

varvideo = document.getelementbyid('videoid');

也可以通过jquery的方法，如下：

varvideo = $('#videoid').get(0);

载入视频：load() ，

播放视频：play() ，

暂停：pause() ，

快进10秒：currenttime+=10

播放速度增加：playbackrate++

播放速度增加0.1：playbackrate+=0.1

音量增加：volume+=0.1

静音：muted=true

3、示例

html5视频教程-视频播放功能

$(document).ready(function(){

var video = $('#myvideo');

$("#play").click(function(){  video[0].play();  });

$("#pause").click(function(){ video[0].pause(); });

$("#go10").click(function(){  video[0].currenttime+=10;  });

$("#back10").click(function(){  video[0].currenttime-=10;  });

$("#rate1").click(function(){  video[0].playbackrate+=2;  });

$("#rate0").click(function(){  video[0].playbackrate-=2;  });

$("#volume1").click(function(){  video[0].volume+=0.1;  });

$("#volume0").click(function(){  video[0].volume-=0.1;  });

$("#muted1").click(function(){  video[0].muted=true;  });

$("#muted0").click(function(){  video[0].muted=false;  });

$("#full").click(function(){

video[0].webkitenterfullscreen(); // webkit类型的浏览器

video[0].mozrequestfullscreen();  // firefox浏览器

});

});

你的浏览器不支持html5

---

播放

暂停

快进10秒

快退10秒

播放速度+

播放速度-

声音+

声音-

静音

解除静音

全屏