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

    <video>标签用于定义视频。

    案例1:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <video width="300" height="300" controls="controls">
    <source src="gsd.mp4" type="video/mp4">
    <source src="gsd.ogg" type="video/ogg">
    您的浏览器不支持video标签
    </video>
    </body>
    </html>

    效果图1(浏览器支持)

    效果图2(浏览器不支持)

    注释:
    (1)controls 用于向用户显示播放、暂停和音量按钮,属性值为:controls;
    (2)autoplay 用于控制视频就绪后马上播放,属性值为:autoplay;
    (3)loop 用于控制视频播放完成后再次开始播放,属性值为:loop;
    (4)preload 用于控制视频在页面加载时进行加载,准备播放,若已经使用“autoplay”,则忽略该属性,属性值为:preload;
    (5)src 视频链接,video元素允许多个格式不同的source元素,浏览器将会使用第一个可识别的格式;
    (6)可以在<video></video>之间放置文本内容,这样浏览器可以显示不支持此标签的相关信息;
    (7)<video>拥有方法、属性及事件play()、pause()等,案例如下:
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    function clickA(){
    var a = document.getElementById("ex_1");
    if(a.paused){
    a.play();
    }else{
    a.pause();
    }
    }
    </script>
    </head>
    <body>
    <video id="ex_1" width="300" height="300" controls="controls">
    <source src="gsd.mp4" type="video/mp4">
    <source src="gsd.ogg" type="video/ogg">
    您的浏览器不支持video标签
    </video>
    <br/>
    <button onclick="clickA()">播放/暂停</button>
    </body>
    </html>

    效果图:(浏览器支持情况下)

    
    


  • 相关阅读:
    静态链表与动态链表(C语言实现)
    Java处理java.util.ConcurrentModificationException异常
    java读取文件
    java如何引入接口中定义的常量
    java反编译命令javap
    【算法】如何将一个文件分割成多份(C,Java语言实现)
    【算法】计算一篇文章的单词数(C、Java语言实现)
    如何将mongodb bson文件转成json文件
    Gunicorn快速入门
    nginx+uwsgi+django
  • 原文地址:https://www.cnblogs.com/bingling2015/p/4403327.html
Copyright © 2011-2022 走看看