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>

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

    
    


  • 相关阅读:
    php 观察者模式
    php 策略模式
    php 适配器模式
    php 单例模式
    程序员应该关注的行业网站
    Mysql 5.7 索引使用规则和设计优化
    Docker官方镜像源或阿里云镜像源加速解决pull过慢的问题
    MySQL 优化案例
    mysql优化count(*)查询语句
    Mysql超大分页优化处理
  • 原文地址:https://www.cnblogs.com/bingling2015/p/4403327.html
Copyright © 2011-2022 走看看