如何在所有主流浏览器中启用<video>和<audio>标记
要使HTML5视频和音频标签适用于所有主流浏览器,只需在文档的<head>中的某处添加以下代码行即可。
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
如何嵌入视频
您可以使用以下代码将视频嵌入到您的页面中。
<video src="video.mp4" width="320" height="200" controls preload></video>
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
如何嵌入音频
您可以使用以下代码将音频嵌入到页面中。
<audio src="audio.mp3" controls preload></audio>
视频格式:
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML5 中的新属性:
属性 值 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像( poster = “ poster.jpg ”)。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放(预加载)。
如果使用 “autoplay”,则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
HTML 音频/视频 方法:
方法 描述
addTextTrack() 向音频/视频添加新的文本轨道。
canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
load() 重新加载音频/视频元素。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。
可以通过 addEventListener 监听视频的ended事件,监听结束时间,进行结束,跳转的操作等
html:
<video id="header-video2" width="1920" height="1080" src="xxx/bg2.mp4" muted loop style="display: none;"></video>
<video id="header-video1" width="1920" height="1080" src="xxx/bg1.mp4" muted autoplay></video>
js:
//逻辑是页面有两个视频,默认显示header-video1,隐藏header-video2
当header-video1播放结束时,页面一直循环播放header-video2,功能实现如下:(默认页面先隐藏了video2,且video1只播放一次,结束后一直循环播放video2)
var video1 = document.getElementById('header-video1');
var video2 = document.getElementById('header-video2');
video2.load();//视频2加载
video1.addEventListener('ended', function () {
//监听视频1播放结束时,播放视频2
video2.play()
}, true)
onerror 事件在视频/音频(audio/video)数据加载期间发生错误时触发。
支持的 HTML 标签: <audio>, <video>
video1.addEventListener('onerror', function () {
$('#header-video1').hide()
$('.main').addClass('act')
$('.btns').addClass('act')
$('#header-video2').hide()
}, true)
官方文档: https://html5media.info/