HTML5 音视频操作

video视频与audio音频参考手册

video与audio格式支持

video与audio属性

语法：< video src=“视频文件路径” controls autoplay loop muted preload>你的浏览器不支持video< /video>

语法：< audio src=“音频文件路径” controls autoplay loop muted preload>你的浏览器不支持audio< /audio>

属性	描述
`src`	设置或返回音频、视频的当前资源路径 [JS] src = url : 当前要播放的资源路径
`controls`	设置或返回音频、视频是否显示控件，比如播放、音量等控件 [JS] controls = true \| false; true：显示控件、false：不显示控件
`loop`	设置或返回音频、视频是否循环播放 [JS] loop = true \| false; true：循环、false：不循环
`paused`	设置或返回音频、视频是否暂停 [JS] paused = true \| false；true：暂停、false：不暂停
`muted`	设置或返回音频、视频是否静音 [JS] muted = true \| false；true：静音、false：有声音
`volume`	设置或返回音频、视频的当前音量 [JS] volume = 必须介于0.0至1.0之间，0 表示静音，1 表示音量最大
`duration`	返回当前音频、视频的长度（以秒计）
`currentTime`	设置或返回音频、视频中的当前播放位置（以秒计）
`playbackRate`	设置或返回音频、视频当前状态播放速度 [JS] 属性值为数值：1为正常速度，大于1则速度加快，小于1则速度减慢
`autoplay`	音频、视频在就绪后自动播放，新版浏览器关闭了该属性
`preload`	音频、视频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可
`poster`	用于在视频加载时或用户在点击播放前显示的图片，属性值是图片路径
`width/height`	设置视频播放器的宽高
`currentSrc`	返回当前音频、视频的URL
`defaultMuted`	设置或返回音频、视频默认是否静音；该属性仅会改变默认状态，想要改变当前状态使用muted属性
`defaultPlaybackRate`	设置或返回音频、视频的默认播放速度；该属性仅会改变默认状态，想要改变当前状态使用palybackRate属性
`ended`	返回音频、视频是否已结束。如果播放已结束，则返回true，否则返回false
`error`	错误状态，error属性返回一个MediaError对象

video与audio方法

play()：播放媒体文件，自动把paused属性变为false
pause()：暂停媒体文件，自动把paused属性变为true
load()：加载媒体文件，为播放做准备；通常用于播放前的加载
这三个方法在jQuery均不能使用，要在原生js中使用
用户没有click、dblclick、touch等主动交互行为，使用js直接调用play()方法会报错

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="jquery-3.4.1.min.js"></script><style type="text/css">.box{width: 500px; margin: 50px auto 0;}#vd{ width: 100%;}.aaa{width: 500px; height: 30px;margin: 0 auto;}button{width: 160px; height: 30px;}</style><script>// -------------------原生js代码开始------------// window.onload = function(){//     // 获取视频对象//     var vid = document.getElementById("vd");//     // 获取按钮对象//     var vplay = document.getElementById("btn1");//     var vpause = document.getElementById("btn2");//     var vload = document.getElementById("btn3");//     vplay.onclick = function(){//         vid.play();//     };//     vpause.onclick = function(){//         vid.pause();//     };//     vload.onclick = function(){//         vid.load();//     };// }// -------------------原生js代码结束------------// -------------------JQ代码开始------------$(function(){// 获取视频对象var vid = document.getElementById("vd");//获取到的是DOM对象// var vid = $("vd");//获取到的是jQuery对象，JQ对象没有paly(),pause(),load()等方法，所以对音视频无效// 播放，必须使用DOM对象$("#btn1").click(function(){vid.play();});// 暂停，必须使用DOM对象$("#btn2").click(function(){vid.pause();});// 重载，必须使用DOM对象$("#btn3").click(function(){vid.load();});})// -------------------JQ代码结束------------</script>
</head>
<body><div class="box"><video id="vd" src="./img/a.mp4" controls></video></div><div class="aaa"><button id="btn1">播放</button><button id="btn2">暂停</button><button id="btn3">重载</button></div>
</body>
</html>

video与audio事件

这些事件只能在原生JS中使用，所以要在事件前面加上“on”

音视频三种加载事件

loadstart：音频、视频开始加载时触发
canplay：音频、视频能够开始播放时触发
error：音频、视频加载期间发生错误时触发

音视频五种播放事件

play：当音频、视频已开始或不再暂停时
pause：当音频、视频已暂停时
waiting：当音频、视频因缓冲而暂停时
playing：当音频、视频因缓冲结束时
ended：当前音频、视频播放列表已结束时

video与audio媒介资源

source标签用来定义媒介资源，是video和audio标签的子标签，可指定多个文件来源，用来解决浏览器的兼容问题
如果使用了source标签，则不可以在video和audio中设置src属性
src属性：定义资源路径
type属性：规定媒介资源的类型

    <video controls width="500"><source src="./video/video2.mp4" type="video/mp4"><source src="./video/video2.webM" type="video/webM">你的浏览器暂不支持视频播放</video>

自动播放失效处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="jquery-3.4.1.min.js"></script><style type="text/css">.box{width: 500px; margin: 50px auto 0; position: relative;}#vd{ width: 100%;}#zhezhao{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);position: fixed; top: 0; left: 0;z-index: 1;}</style>
</head>
<body><div class="box"><video id="vd" src="./img/a.mp4" controls></video></div><div id="zhezhao"></div><script>// 1、修改浏览器设置// 2、默认静音：对视频有效，对音频无效// 视频可以使用默认静音"muted"属性，实现自动播放// 音频使用默认静音不能实现自动播放// 3、引导用户主动交互// 获取视频对象var vid = document.getElementById("vd");document.getElementById("zhezhao").onclick = function(){vid.play();this.style.display = "none";}; </script>
</body>
</html>

HTML5 音视频操作相关推荐

javaCV入门指南：调用FFmpeg原生API和JavaCV是如何封装了FFmpeg的音视频操作？
JavaCV入门指南系列: JavaCV入门指南:序章(看完本章后,不想看原理的小伙伴可直接跳转到<快速上手篇>) JavaCV入门指南:调用FFmpeg原生API和JavaCV是如何封装 ...
C# 使用SDL2实现Mp4文件播放音视频操作
播放音视频的关键:视频的格式是H264,音频的格式是AAC.使用ffmpeg探测流的方式来实现音视频流的解码播放. 数据处理逻辑:H264->YUV AAC->PCM. SDL2工具类 u ...
MediaElement 4.1.3 发布，HTML5 音视频解决方案
MediaElement 4.1.3 已发布.MediaElement 是支持 MP4.WebM 和 MP3 以及 HLS.Dash.YouTube.Facebook.SoundCloud 和其他具有 ...
html5中加入视频格式,HTML5音视频格式video和audio
html5音频和视频使用详解. 一.html5视频以前,大多数视频是通过插件(比如 Flash)来显示的,然而,并非所有浏览器都拥有同样的插件现在,HTML5 规定了一种通过 video 元素来包 ...
html背景音乐火狐兼容,Firefox 中的 HTML5 音视频
您可以在网页上播放某些类型的音频和视频文件,而且无需使用插件.本文介绍了可以播放哪些格式以及如何控制.保存和打开它们. 支持的格式因为许多音频和视频文件类型的使用受到专利限制,所以需要第三方应用程 ...
HTML5新增-页面结构状态-列表-表单-音视频-全局兼容
页面结构状态-列表-表单-音视频-全局兼容 1 HTML5 新增语义化标签 1.1 新增页面结构标签标签名语义和功能属性单标签还是双标签 header 表示页面或section中的页眉双 f ...
微信小程序-音视频剪辑
起因:英语配音源码在文章尾部,可直接Copy使用最近在做一个英语配音的小程序项目,涉及的核心技术是:音视频剪辑.其实相关的成程序产品已经有很多了,所以花了几天时间也就搞定了,讲解一下其中核心技术: ...
推荐几个在线处理文件、图片、音视频的工具，免费又好用！
1. BgRemover-在线图片去底工具 https://www.aigei.com/bgremover/ 初始页面: 提供操作:选择图片--> 调节容差值--> 完成! 使用效果: 网 ...
音视频解封装：MP4核心Box详解及H264AAC打包方案
问题背景: 上一篇文章<音视频封装:MP4结构概述和分析工具>让大家看了下MP4的主要结构和推荐了一些分析工具,如果你对MP4没有任何了解,还是先看上文,了解MP4的基本结构,其中还有许 ...