zoukankan      html  css  js  c++  java
  • HTML5 video视频

    代码格式

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video>

    注:

    <video> 元素提供了 播放、暂停和音量控件来控制视频。

    同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

    <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

    <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

    使用DOM控制

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

    <video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

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

    实例:

    复制代码
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body> 
    
    <div style="text-align:center"> 
      <button onclick="playPause()">播放/暂停</button> 
      <button onclick="makeBig()">放大</button>
      <button onclick="makeSmall()">缩小</button>
      <button onclick="makeNormal()">普通</button>
      <br> 
      <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div> 
    
    <script> 
    var myVideo=document.getElementById("video1"); 
    
    function playPause()
    { 
        if (myVideo.paused) 
          myVideo.play(); 
        else 
          myVideo.pause(); 
    } 
    
        function makeBig()
    { 
        myVideo.width=560; 
    } 
    
        function makeSmall()
    { 
        myVideo.width=320; 
    } 
    
        function makeNormal()
    { 
        myVideo.width=420; 
    } 
    </script> 
    
    </body> 
    </html>
    复制代码
  • 相关阅读:
    HDU4529 郑厂长系列故事——N骑士问题 —— 状压DP
    POJ1185 炮兵阵地 —— 状压DP
    BZOJ1415 聪聪和可可 —— 期望 记忆化搜索
    TopCoder SRM420 Div1 RedIsGood —— 期望
    LightOJ
    LightOJ
    后缀数组小结
    URAL
    POJ3581 Sequence —— 后缀数组
    hdu 5269 ZYB loves Xor I
  • 原文地址:https://www.cnblogs.com/1329197745a/p/14905110.html
Copyright © 2011-2022 走看看