Audio-和-Video-介绍

jiezi

5 年前

HTML 多媒体，主要分为 Audio 音频和 Video 视频。

src 指定当前播放的音频文件，controls播放控制器，loop歌曲循环，autoplay自动播放 (chrome66 之后被禁止)主流浏览器已经关闭了自动播放，需要 js 触发才行，preload 预加载，如果使用了 autoplay 这个属性 preload 就失效了。

    <audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay">
        您的浏览器不支持 html5 的 audio 标签
    </audio>

    Firefox：支持 Ogg Vorbis 和 WAV

    Opera：支持 Ogg Vorbis 和 WAV

  Safari：支持 MP3，AAC 格式，和 MP4

  Chrome：支持 Ogg Vorbis，MP3，WAV，AAC 和 MP4

  Internet Explorer 9+：支持 MP3，AAC 格式，和 MP4

  IOS：支持 MP3，AAC 格式，和 MP4

  Android：支持 AAC 和 MP3

Audio 不光是一个 HTML 标签，它还是一个 window 对象。既然是对象，那就有方法和属性。

currentTime，获取当前播放时间
duration，获取歌曲的总时间

play，播放

  audio.addEventListener("play",() => {});
  audio.onplay = () => {}

pause，暂停
loadstart，开始加载
durationchange，时长数据变化
loadedmetadata，元数据已加载
progress，加载中
canplay，可以播放
canplaythrough，边缓冲边播放
play()，播放歌曲
pause()，暂停歌曲
load()，重新加载歌曲

以前的 Audio 浏览器是不能直接播放的，如果需要播放一个音频需要借助一个 flash 插件。后来有了 Audio.js 的出现后，播放音频不用依赖 flash 插件了。flash 是使用 as 来编写的，它和 JavaScript 有点相像，但是有一些门槛，在此基础上，出现了很多的 Audio 插件，audio 插件做了两件事情，一件是旧版的浏览器兼容（http://kolber.github.io/audiojs/），第二件是美化自定义了浏览器的外观。

    // 加载 audio.js
    <script src="/audiojs/audio.min.js"></script>
    // 静态加载
    <script>
      audiojs.events.ready(function() {const as = audiojs.createAll();
      });
    </script>
    // 动态加载
    <audio style="display:none" src="./music.mp3" preload="auto" />

src源，controls播放控制器，loop 循环播放，autoplay 自动播放，height，width，宽度和高度，在 Audio 里面不能指定，但是在 Video 里面是可以的，muted静音，poster 预览图（当视频没有播放或者正在加载时展示给用户的一张图片，为了交互的友好性），preload 预加载，和 autoplay 一块时失效。

    <video src="xxxx.mp4" controls="controls" loop="loop" autoplay="autoplay" >
        您的浏览器不支持 html5 的 video 标签
    </video>

currentTime，获取当前播放时间
duration，获取歌曲的总时间

play，播放

  video.addEventListener("play",() => {});
  video.onplay = () => {}

pause，暂停
loadstart，开始加载
durationchange，时长数据变化
loadedmetadata，元数据已加载
loadeddata，当前帧的数据已加载，无法播放下一帧
progress，加载中
canplay，可以播放
canplaythrough，边缓冲边播放
play()，播放视频返回一个 promise
pause()，暂停视频
load()，重新加载视频

video 支持的视频的格式主要有三种：MP4、ogg、webm。

Firefox：支持 Ogg Theora 格式和 WEBM
Opera：支持 Ogg Theora 格式和 WEBM
Safari：支持 MP4
Chrome：支持 Ogg Theora 格式，MP4 和 WEBM
Internet Explorer 9：支持 MP4 和 WEBM(需要安装插件)
IOS：支持 MP4
Android：支持 MP4 和 WEBM(Android 2.3 版本以上)

流媒体是指采用流式传输的方式在 Internet 播放的媒体格式(流媒体格式 video 标签是不支持的)。

流媒体又叫流式媒体，它是指商家用一个视频传送服务器把节目当成数据包发出，传送到网络上。

用户通过解压设备对这些数据进行解压后，节目就会像发送前那样显示出来。

典型的流媒体格式：rtmp、rtsp、flv 都是流媒体的传输协议。

rtmp 是 Adobe 公司提供的一个流媒体协议，使用的是 TCP 协议，稳定性好

rtsp 是 Netscape 网景公司提供的一种协议，使用的是 UDP 协议，实时性好

flv 是苹果公司提出的一个流媒体的一个协议，也是使用的 TCP 协议，把整个视频流切割成一段一段的 m3u8 文件

    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    
    const player = videojs('video', options, function onPlayerReady() {this.play();
        this.on('ended', function() {videojs.log('播放结束');
        });
    });

Audio-和-Video-介绍

1：Audio

基本语法

Audio 支持格式有：

对象的常用属性和方法

Audio.js

2：Video

基本语法

Video 对象

常用的属性和方法：

视频格式与流媒体

Video.js