zoukankan      html  css  js  c++  java
  • HTML5 <video>

    HTML5 <video> 元素同样拥有方法、属性和事件。

    其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

    下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。

    实例

    为视频创建简单的播放/暂停以及调整尺寸控件:

    <!DOCTYPE html> 
    <html> 
    <body> 
    
    <div style="text-align:center;"> 
    <!--添加按钮,input button都可以-->
    <input type="button" value="播放/暂停" onclick="playstop()"></input>
      <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 playstop()
    {
    if(myVideo.paused)
      myVideo.play();
    else
      myVideo.pause();
    }
    /*放大,自己规定大小,注意不要加px*/
    function makeBig()
    { 
    myVideo.width=900; 
    } 
    
    function makeSmall()
    { 
    myVideo.width=320; 
    } 
    
    function makeNormal()
    { 
    myVideo.width=420; 
    } 
    </script> 
    
    </body> 
    </html>
    View Code
    controls属性供添加播放、暂停、音量控件。video标签下插入的内容是供不支持video的浏览器显示的
    <video src="/i/movie.ogg"  width="320" height="240" controls="controls">

    例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

    要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。

    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

    视频格式

    当前,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 文件

  • 相关阅读:
    大数据分析防御威胁,中小企业安全的选择
    计算机鼻祖-Donald Knuth(高纳德) 的传奇
    [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标
    谁说技术男没有人文情怀:当旅途遇到生命赞歌
    控制器之间传值,逆传
    #include &lt;sys/socket.h&gt;找不到头文件
    怎样得到QML package的具体API接口
    Java面向对象编程(一)
    STL algorihtm算法iter_swap(29)
    jquery分页插件
  • 原文地址:https://www.cnblogs.com/sjxx/p/5620478.html
Copyright © 2011-2022 走看看