• video元素与audio元素详解

    1.video/audio属性

    video元素和audio元素是HTML5中针对视频新增的两个标签，通过对这两个标签进行设置，可以控制页面的 上的音视频的播放。

    1.src 属性

    设置音/视频文件的URL地址。相关使用代码如下:

     

     

    2.autoplay （自动播放属性）

     

     

    3.preload属性

    设置当页面加载时，是否对音/视频文件进行预加载。preload有三个可供选择的值;none表示不进行预加载；metadata表示仅加载元数据，即音/视频文件的大小、第一帧、播放列表和持续时间等;auto表示与预加载全部音/是视频文件。相关使用代码如下。

     

     

    4.poster属性

    该属性是video元素属性，甚至当视频不可用时，向用户展现一幅图片。相关代码如下：

    5.loop属性（音/视频 循环播放）

     

    6.controls属性（添加浏览器默认自带的播放控制器，其中包括播放、暂停和声音控制等控件）

     

    7.width属性与height属性

    这两个属性是video元素属性，width用于设置宽度，height用于 设置高度。

     

    8.muted属性

    设置页面加载时，播放器是否静音。如果需要静音，就添加该属性，否则不添加该属性。

     

    2.video/audio方法

    在使用video元素和audio元素时，还可以在脚本中使用相关的方法对音/视频文件进行控制，相关方法主要有四种，下面分别给你介绍:

    1.play方法

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script>
    9.         function play(){
    10.             var video=document.getElementById('MyVideo');
    11.             video.play();
    12.         }
    13.     </script>
    14. </head>
    15. <body>
    16.     <video src="movie.mp4" width="400" height="300" controls id="MyVideo"></video><br>
    17.     <button onclick="play()">播放</button>
    18. </body>
    19. </html>

    执行结果如下： 

     

     2.pause方法

    与play方法相对应的pause方法用于控制暂停播放音/视频功能，pause方法也需要在叫脚本中设置才能使用，相关使用代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script>
    9.         function pause(){
    10.             var video=document.getElementById('MyVideo');
    11.             video.pause();
    12.         }
    13.     </script>
    14. </head>
    15. <body>
    16.     <video src="movie.mp4" width="384" height="216" controls id="MyVideo"></video><br>
    17.     <button onclick="pause()">暂停</button>
    18. </body>
    19. </html>

     执行结果如下：

    3.load方法

    调用该方法可重新加载音/视频文件进行播放。相关使用代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script>
    9.         function load(){
    10.             var video=document.getElementById('MyVideo');
    11.             video.load();
    12.         }
    13.     </script>
    14. </head>
    15. <body>
    16.     <video src="movie.mp4" width="384" height="216" controls id="MyVideo"></video><br>
    17.     <button onclick="load()">重新加载</button>
    18. </body>
    19. </html>

    执行结果如下：

     

  • 相关阅读:
    c# Excel转换成DataSet
    本地连接远程mysql服务报错：MySQL is running but PID file could not be found [FAILED]
    MySQL安装配置教程（超级详细）
    Leetcode P84 Java使用栈解决此问题
    昆仑芯 AI 加速卡 R200 与龙蜥操作系统完成产品兼容认证
    云原生|kubernetes|部署MySQL一主多从复制集群
    shiro 安全(权限)框架
    STC51单片机学习笔记8——stc12c56 串口显示AD（多路ad）
    Docker快速上手：使用Docker部署Drupal并实现公网访问
    Pod控制器
  • 原文地址：https://blog.csdn.net/gjbss/article/details/128053501