Video

作者: 江疏影子 | 来源:发表于2019-02-22 14:57 被阅读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;

相关文章

  • HTML 5 新增的标签

    一、video标签 什么是video标签 作用:播放视频 格式一: video 属性 src: 用于告诉video...

  • 2020-04-12

    video/webmvideo/webm;codecs=vp8video/webm;codecs=vp9video...

  • Final Project

    Problem Video Stablization Intuition Video stabilization ...

  • 原生video

    video 一、video简介 video是用来放置视频,可以在网页上展示视频。 video 不支持 IE8及以下...

  • PKShortVideo README.md

    PKShortVideo A video library like WeChat short video for ...

  • video标签展示视频封面

    video插件 vue-video-player --------- 部分--------

  • A great woman——Bertha Benz

    This morning,a video was attracted me.This video is made ...

  • 视频音频 视频 添加一个视频支持多种格式 webm-chrome和firefox mp4-le和safari og...

  • Video

    video标签支持三种视频格式,Ogg、MPEG 4、webM Ogg 带有 Theora 视频编码和...

  • video

    已解决的问题: video标签加controls 添加控制栏 点击视频暂停 监听视频播放事件 视频全屏事件(兼容做...

网友评论

      本文标题:Video

      本文链接:https://www.haomeiwen.com/subject/nrreyqtx.html