您的位置:澳门402永利com > 澳门402永利com网络 > HTML5使用DOM进行自定义控制示例代码

HTML5使用DOM进行自定义控制示例代码

发布时间:2019-11-26 14:36编辑:澳门402永利com网络浏览(66)

    点评:HTML5的video纵然可用controls来显示控件,并开展调控播放暂停等,可是分裂的浏览器显示的效劳恐怕不相通,下边与大家享用下行使Dom来开展自定义的片段操作和操纵

    HTML 5 视频(video),html视频video

    video 元素支持三种视频格式

    IE Firefox Opera Chrome Safari
    带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 No 3.5+ 10.5+ 5.0+ No
    带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 9.0+ No No 5.0+ 3.0+
    带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 No 4.0+ 10.6+ 6.0+ No

     

     

     

     

     

    1、设置多少个ogg格式的文件

    <video src="movie.ogg"  controls="controls" height="200px" width="300px">
    你的浏览器不协理 video 标签。
    </video>

    进行如下:

    图片 1

    当浏览器不支持ogg格式时则呈现“您的浏览器不援助 video 标签。”

    2、设置二种格式
    <video width="320" height="240" poster="Suk.png" controls>
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.ogg" type="video/ogg">
      您的浏览器不辅助 video 标签。
    </video>

    实行如下:

     图片 2

    如上海教室为录制安装贰个暗中认可图片。也得以加上任何品质。

    <video> 标签的脾气如下:

    controls/controls="controls" 展现播放开关
    autoplay/autoplay="autoplay" 即刻播放
    loop/loop="loop" 循环播放
    muted/muted="muted" 静音
    preload/preload="preload" 加载录制d
    poster="路线" 突显默许图片

    3、自定义播放暂停及大小(Video + DOM)

     <button onclick="playPause()">播放/暂停</button>
      <button onclick="makeNormal()">改过大小</button>

     <video id="video1" width="200">
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.ogg" type="video/ogg">
      您的浏览器不支持 video 标签。
    </video>

    将javascript写在html的下方

    <script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
       i f (myVideo.paused)
           myVideo.play();  //播放
       else
          myVideo.pause(); //暂停
    }

    function makeNormal()
    {
        myVideo.width=420; //自定义宽度,高度自适应
    }
    </script>

    实行如下:

    图片 3

     大多数浏览器协助的摄像方法、属性和事件(日后在做驾驭卡塔尔国

    方法 属性 事件
    play() currentSrc play
    pause() currentTime pause
    load() videoWidth立即执行--视频元素前执行 progress
    canPlayType() videoHeight立即执行--视频元素前执行 error
      duration timeupdate
      ended ended
      error abort
      paused empty
      muted emptied
      seeking waiting
      volume loadedmetadata
      height  
      width  

     

     

     

     

     

     

     

     

     

     

     

     

     

    尘寰为html5 录像和音频的章程属性和事件仿照效法

     

    5 录制(video),html录像video video 成分支持二种摄像格式 IE Firefox Opera Chrome Safari 带有 西奥ra 录制编码和 Vorbis 音频编码的 Ogg 文件 No 3.5+ 1...

    HTML5的video纵然可用controls来展现控件,并开展调控作和播出放暂停等,不过区别的浏览器彰显的法力或然不平等,所以众多时候大家要求利用Dom来展开自定义的部分操作和决定。上边是三个小例子。
    自然效果不是很雅观,若想美观的能够团结安装css样式等。

    代码如下:

    <div id="video_div" style="text-align:center;">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="toBig()">大</button>
    <button onclick="toNormal()">中</button>
    <button onclick="toSmall()">小</button>

    <video id="myVideo" width="500" height="250" style="margin-top:15px;">
    <source src="demo.mp4" type="video/mp4" />
    <source src="demo.ogg" type="video/ogg" />
    你的浏览器不扶持此HTML5 录像标签。
    </video>
    </div>

    代码如下:

    <script type="text/javascript">
    var myVideo=document.getElementById("myVideo");
    function playPause()
    {
    if (myVideo.paused)
    myVideo.play();
    else
    myVideo.pause();
    }
    function toBig()
    {
    myVideo.width=560;
    }
    function toNormal()
    {
    myVideo.width=420;
    }
    function toSmall()
    {
    myVideo.width=320;
    }
    </script>

    内需注意的是在具有属性中,唯有 videoWidth 和 videoHeight 属性是即时可用的。
    在摄像的元数据已加载后,别的品质才可用。

    本文由澳门402永利com发布于澳门402永利com网络,转载请注明出处:HTML5使用DOM进行自定义控制示例代码

    关键词: