HTML5视频了解笔记

来源:互联网 发布:森海塞尔淘宝哪家 编辑:程序博客网 时间:2024/05/16 16:13
html5能在完全脱离插件的情况下播放音视频,但不是所有格式都支持。
 支持的:ogg(支持的浏览器F,C,O),mp4(S,C),webm(I,F,C,O)

< video >的使用:
   A,< video src="文件地址"controls > < / video >//仅仅显示个视频,如图:
HTML5视频了解笔记
        B,< video src="文件地址" controls="controls" >
                       破浏览器是看不了的。
        < / video >//还是仅仅显示个视频,但是如果碰到IE6啊,或者是一些不支持的浏览器就只显示句话。
        C,< video controls="controls" >
                       < source  src="move.ogg"type="video/ogg">
                       < source  src="move.webm"type="video/webm">
                       什么破浏览器   都看不了的。
        < / video >//先播放第一个,不支持,播放第二个,再不支持,显示文字。

video的API属性和方法有很多,可以百度一下,我百了一个博文,里面比较详细,在这分享一下:

http://blog.csdn.net/cdnight/article/details/39323697


简单常见的例子:
    video=用js在页面获取一个
            video.muted=true              =====>静音,有true,false两个值
            video.currentTime+=10     =====>快进10秒,currentTime是获取当前时间
            video.playbackRate=3        =====>加速播放,以前的3倍
                  =-3时,在正常情况下是没用的,=1/3是当前速度的1/3倍,就相当于慢动作了。1是默认倍数。
                  //加速,是播放速度快了
                  //快进,是播放位置变了
             video.volume+=0.2              =====>是调声音的,声音范围在0~1

巧法:
   一个按钮,实现静音和不静音的效果:
               定义一个按钮:
                            < button onclick="shutup(this)" >静音< / button >
                写一个js方法:
                             function shutup(obj){
                                      if(video,muted){
                                               obj.innerHTML="静音"
                                               video.muted=false;
                                       }else{
                                               obj.innerHTML="不静音"
                                               video.muted=true;
                                       }
                              }

(至于音频audio支持的格式:ogg(支持的浏览器C,F,O),mp3(I,C,S),wav(F,O,S)其他的属性,方法,用法都差不多只是没有图像罢了)