• html5学习(一) video字段


    html5对视频的支持:

    html5通过<video></video>字段实现web页面上视频的播放功能。

    目前各大浏览器对<video>字段的支持:

    当前,video 元素支持三种视频格式:

    格式IEFirefoxOperaChromeSafari
    Ogg No 3.5+ 10.5+ 5.0+ No
    MPEG 4 9.0+ No No 5.0+ 3.0+
    WebM No 4.0+ 10.6+ 6.0+ No

    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    简单的html显示视频的例子

    <!DOCTYPE HTML>
    <html>
    <body>
    
    <video src="/i/movie.ogg"  width="320" height="240" controls="controls">
    Your browser does not support the video tag.
    </video>
    
    </body>
    </html>

    src:指定视频资源的位置(包括相对地址以及绝对地址)。

    control 属性供添加播放、暂停和音量控件。

    此处注意视频格式

     

    <video> 标签的属性

     

    属性描述
    autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
    preload preload

    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。

    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。

     

    <!DOCTYPE html> 
    <html> 
    <body> 
    
    <div style="text-align:center;">
      <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" />
        Your browser does not support HTML5 video.
      </video>
    </div> 
    
    <script type="text/javascript">
    var myVideo=document.getElementById("video1");
    
    function playPause()
    { 
    if (myVideo.paused) 
      myVideo.play(); 
    else 
      myVideo.pause(); 
    } 
    
    function makeBig()
    { 
    myVideo.width=560; 
    } 
    
    function makeSmall()
    { 
    myVideo.width=420; 
    } 
    
    function makeNormal()
    { 
    myVideo.width=520; 
    } 
    </script> 
    
    </body> 
    </html>
    方法属性事件
    play() currentSrc play
    pause() currentTime pause

    通过mvideo的play或者pause判断视频是否在播放或者暂停。

  • 相关阅读:
    POJ3320 Jessica's Reading Problem
    POJ3320 Jessica's Reading Problem
    CodeForces 813B The Golden Age
    CodeForces 813B The Golden Age
    An impassioned circulation of affection CodeForces
    An impassioned circulation of affection CodeForces
    Codeforces Round #444 (Div. 2) B. Cubes for Masha
    2013=7=21 进制转换
    2013=7=15
    2013=7=14
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/3429227.html
Copyright © 2020-2023  润新知