h5的video和audio标签等的使用及兼容

最新推荐文章于 2023-05-11 20:30:39 发布

dxj124

最新推荐文章于 2023-05-11 20:30:39 发布

阅读量1.2k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/dxj124/article/details/81531799

版权

H5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如何在所有主流浏览器中启用<video>和<audio>标记

要使HTML5视频和音频标签适用于所有主流浏览器，只需在文档的<head>中的某处添加以下代码行即可。

如何嵌入视频

您可以使用以下代码将视频嵌入到您的页面中。

new : HTML5 中的新属性。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

如何嵌入音频

您可以使用以下代码将音频嵌入到页面中。

视频格式:
格式 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/