首页 前端知识 最新HTML5中的视频和音频讲解

最新HTML5中的视频和音频讲解

2024-09-10 23:09:19 前端知识 前端哥 717 664 我要收藏

第6章 HTML5中的视频和音频

H5新增video,audio,播放视频和音频,统称为多媒体元素。

6.1 多媒体元素基本属性

video用于电影文件和其他视频流的播放。

audio用于音乐文件和其他音频流的播放。

video的属性

  • src:文件路径,本地或者网络上。
  • autoplay:自动播放,一进页面就自动播放。
  • width和height:媒体元素大小,单位像素,若不设置则播放源文件大小,只设置1个值会等比例控制视频大小。
  • controls:设置为true时,视频底部有控制条工具,包括播放/暂停,进度条,音量开关大小和速度等功能。
  • poster:所选图片的URL,添加后播放前显示当前图片而不是视频第一帧,视频不可用时遮盖空白,美观。
  • networkState:返回视频文件网络状态,当浏览器读取文件时,将触发progress事件,获取不同各阶段的网络状态值,本属性为只读属性。
    • NETWORK_EMPTY,返回值 0,数据加载初始化
    • NETWORK_IDLE,返回值 1,文件加载成功,等待请求播放
    • NETWORK_LOADING,返回值 2,文件正在加载过程中
    • NETWORK_NO_SOURCE,返回值 3,加载出错,一般原因是没有找到支持的编码格式

audio的属性

  • src:文件路径,本地或者网络上。
  • autoplay:设置为true时,可以直接写属性也是一样的,自动播放,一进页面就自动播放。
  • controls:设置为true时,会出现控制组件,包括进度条,声音大小,静音,播放速度等功能。
1.功能描述

创建video和audio,并在元素的src属性中设置播放的视频和音频,页面加载后自动播放。

需提前准备视频和音频各一个。

2.代码实现
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用多媒体元素播放文件</title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        function progress(e) {
            var intState = e.networkState;
            var strState = strByNum(intState);
            var newLi = document.createElement('li');
            newLi.textContent = strState;
            $$("ulVideo").appendChild(newLi)
        }
        /* 
         - NETWORK_EMPTY,返回值 0,数据加载初始化
         - NETWORK_IDLE,返回值 1,文件加载成功,等待请求播放
         - NETWORK_LOADING,返回值 2,文件正在加载过程中
         - NETWORK_NO_SOURCE,返回值 3,加载出错,一般原因是没有找到支持的编码格式
         */
        function strByNum(n) {
            switch (n) {
                case 0: return "数据加载初始化!";
                case 1: return "文件加载成功,等待请求播放!";
                case 2: return "文件正在加载过程中...";
                case 3: return "加载出错,一般原因是没有找到支持的编码格式!";
            }
        }

        function vdoerror(e) {
            var intState = e.error.code;
            var strState = strByErrorNum(intState);
            var newLi = document.createElement('li');
            newLi.textContent = strState;
            $$("ulError").appendChild(newLi)
        }
        /* 
            - MEDIA_ERR_ABORTED,返回值 1,被中止
            - MEDIA_ERR_NETWORK,返回值 2,出现网络错误,获取资源出错
            - MEDIA_ERR_DECODE,返回值 3,媒体资源可用,解码出错
            - MEDIA_ERR_SRC_NOT_SUPPORTED,返回值 4,没找到可以播放的媒体文件格式
         */
        function strByErrorNum(n) {
            switch (n) {
                case 1: return "被中止!";
                case 2: return "出现网络错误,获取资源出错!";
                case 3: return "返回值 3,媒体资源可用,解码出错!";
                case 4: return "没找到可以播放的媒体文件格式!";
            }
        }

    </script>
</head>

<body>
    <!--./static/黑悟空.mp4 -->
    <video id="vdo" src="./static/黑悟空.mp4" autoplay="true" poster="./img/moon.jpg" onprogress="progress(this)"
        onerror="vdoerror(this)" controls width="800px">您的浏览器不支持视频</video>
    <ul id="ulVideo">
        <li>progress事件:</li>
    </ul>
    <ul id="ulError">
        <li>error事件:</li>
    </ul>
    <audio id="ado" src="./static/黄风起兮.mp3" controls="true"></audio>
</body>

</html>
3.页面效果

路径故意写错:

4.源码分析

用两个ul来记录调用progress和error的过程,通过switch来将code转化为对应的意思。

其他属性,了解为主

  • readyState:只读属性,返回当前播放文件的各种状态,属性返回值省略,有需要去查资料。
  • currentTime,startTime,duration:当前播放时间,开始播放时间,总体播放时间。
  • palyed,paused,ended:开始时间和结束时间,是否出于暂停,是否已结束。
  • defaultPlaybackRate,playbackRate:默认播放速率,当前播放速率。
  • volume,muted:播放音量0-1,是否静音。

6.2 多媒体元素常用方法

通过添加“controls”属性显示控制条工具栏。

也可以自定义播放按钮,调用多媒体元素播放文件时的方法。

  • load(),调用时进行文件的加载,将playbackRate设置为默认值,error设置为null。
  • canPlayType(type),检测当前浏览器是否支持媒体文件类型,type=空(不支持),maybe(可能支持),Probably(支持)

6.2 多媒体元素重要事件

除上述networkState和error对应的progress和error事件以外,还有如下事件:

  • playing(),媒体播放事件。
  • timeupdate(),播放位置发生变化,触发该事件。
  • durationchange(),播放总长度改变时触发。
  • volumechange(),改变或启动静音时触发。

其他的事件有需要查资料。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18063.html
标签
评论
发布的文章

jQuery 选择器

2024-05-12 00:05:34

cdn引入前端插件

2024-10-13 20:10:14

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!