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>
    复制代码
  • 相关阅读:
    .NET MVC AjaxHelper
    .NET MVC HtmlHepler
    堆栈存储的区别
    两个对象的 hashCode()相同,则 equals()也一定为 true,对吗?
    == 和 equals 的区别是什么
    JDK 和 JRE 有什么区别?
    javaInt占几个字节
    java代码如何在没有安装JDK的Windows下运行
    java跨平台的原因
    MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解
  • 原文地址:https://www.cnblogs.com/1329197745a/p/14905110.html
Copyright © 2011-2022 走看看