Video

2019-02-22  本文已影响0人  江疏影子

video标签支持三种视频格式,Ogg、MPEG 4、webM

Ogg 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

在w3c网站有,有一个检测浏览器是否支持video的事件

function checkVideo(){
    if(!!document.createElement('video').canPlayType){
        var vidTest=document.createElement("video");
        oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
        if (!oggTest){
            h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
            if (!h264Test){
                document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
            }else{
                if(h264Test=="probably"){
                    document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
                }else{
                    document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
                }
            }
        }else{
            if(oggTest=="probably"){
                document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
            }else{
                document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
            }
        }
    }else{
        document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
    }
}

引用官方的例子

  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
  </video>

<video> 标签的属性

<video>标签的方法

var myVideo=document.getElementById("video1");
播放

myVideo.play();

暂停

myVideo.pause();

调整宽高

myVideo.width=420;

上一篇 下一篇

猜你喜欢

热点阅读