HTML5对音视频的处理

时间 2019-12-11

原文原文链接

前言javascript

如今网上有许多的框架和插件，可以知足程序猿的各类需求，慢慢的，就有些忽视最基础的东西。css

好比，大多数视频是经过插件（好比 Flash）来显示的。然而，并不是全部浏览器都拥有一样的插件。html

HTML5 规定了一种经过 video 元素来包含视频的标准方法。java

因此，今天影子向你们介绍的，就是HTML5对音视频的处理。web

　

1、优点

1 关于视频不用插件播放，点击就能看
2 跨平台、好升级、好维护，开发成本相对原生APP低不少
3 对移动的良好支持，支持手势，本地存储和视频续播等，经过H5就能够把本身的网站移动化。
4 更为简洁的代码，更好的交互
5 支持游戏开发浏览器

2、兼容性

<video id="video">
    <source src="movie/chenai.mp4"></source>
     您的浏览器不支持 HTML5 video 标签。
</video>

注释：框架

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

　　即，若是，浏览器不支持，则会显示" 您的浏览器不支持 HTML5 video 标签。 "。oop

3、两种方式

 // 方式一 <video src="movie/chenai.mp4h"loop="loop"></video> // 方式二 <video width="320" height="240">
       <source src="movie/chenai.mp4"></source>
    </video>

注释：网站

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

4、video标签的新增属性

  一、controls：给视频添加播放控件。如：开始。暂停
  二、autoplay：视频就绪后立刻播放
  三、loop：表示循环播放
  四、muted：表示视屏静音输出

5、用于操做DOM的方法和属性

5.1用于操做DOM的方法

　一、play():表示视频播放
二、pause():表示视频暂停

5.2用于操做DOM的属性

一、paused：设置或返回音视频是否被暂停
  二、autoplay：设置或返回音视频加载完以后是否当即播放
  三、controls：设置或返回音视频是否添加控件
  四、duration：获取音视频的总时间，单位：秒
  五、currentTime：获取当前播放时间
  六、defaultMuted：设置音视频是否静音输出 true -- 静音默认false，不静音
  七、muted：设置或返回当前播放音视频是不是静音输出。true -- 静音 false --- 不是静音
  八、playbackRate：设置音视频播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
  九、loop：设置是否循环播放。true -- 循环播放   false -- 不循环播放
  十、volume：设置或返回音视频的音量。介于1~0之间的数
  十一、ended：返回音视频是否播放结束。false -- 未结束 true -- 已结束

6、实例

6.1内代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            video{
                width: 600px;
                height:500px;
            }
        </style>
    </head>
    <body>
    
        <!--<video src="movie/chenai.mp4h"loop="loop"></video>-->
        <video id="video">
            <source src="movie/chenai.mp4"></source>
              您的浏览器不支持 HTML5 video 标签。
        </video>
        
        <br />
        <button onclick="bofang()">点击播放/暂停</button>
        <button onclick="timeAll()">点击获取总时间 </button>
        <button onclick="timeBf()">点击获取当前时间 </button>
        <button onclick="jingyin()">点击静音 </button>
        <button onclick="yinliang()">点击获取音量 </button>
        <button onclick="end()">是否播放结束 </button>
    </body>
    <script type="text/javascript">
                
        var video = document.getElementById("video");
        
        //点击播放或暂停
        function bofang(){
            if (video.paused) {//播放状态:是否暂停
                video.play();
            }else video.pause();
        }
        video.autoplay = true;
        video.controls = false;
        
        function timeAll(){
            alert(video.duration); // -- 音视频的总时间
        }
        
        function timeBf(){
            alert(video.currentTime);// -- 当前时间
        }
        
        video.defaultMuted = false;
        
        
        function jingyin(){
            if (video.muted == false) video.muted = true;
            else video.muted = false;
        }
        
        video.playbackRate = 1.0;  // -- 改变播放速度
        video.loop = true;        // -- 是否循环播放
        
        function yinliang(){
            
            video.volume = 0.5;
            alert(video.volume);
        }
        
        function end(){
            alert(video.ended);
        }
    </script>
</html>

6.2效果

今天，影子主要是分享的对视屏的处理，那是由于，音频的处理只是换成了audio便签而已，因此，影子就很少啰嗦了。相信你们也是理解的。