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

如何在所有主流浏览器中启用<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 中的新属性。

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

如何嵌入音频

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

<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/

要实现录制视频并兼容所有浏览器,可以使用MediaRecorder API。这个API在现代浏览器中得到支持,但在一些旧版本的浏览器中可能不支持。为了让它兼容所有浏览器,可以使用一个polyfill库,比如`@webcomponents/webcomponentsjs`。 以下是实现录制视频并兼容所有浏览器的步骤: 1. 首先,在HTML中创建一个`<video>`元素和一个`<button>`元素,用于开始和停止录制。 ``` <video id="video"></video> <button id="start">Start Recording</button> <button id="stop">Stop Recording</button> ``` 2. 在JavaScript中,使用`navigator.mediaDevices.getUserMedia()`方法获取用户的摄像头和麦克风权限,并将其流媒体传递给`<video>`元素。 ``` const video = document.getElementById('video'); navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stream => { video.srcObject = stream; video.play(); }) .catch(error => { console.error(error); }); ``` 3. 创建一个`MediaRecorder`对象,将`<video>`元素的流媒体传递给它,并指定录制视频的格式和编码器。 ``` let mediaRecorder; const chunks = []; function startRecording() { mediaRecorder = new MediaRecorder(video.srcObject, { mimeType: 'video/webm; codecs=vp9' }); mediaRecorder.ondataavailable = event => { chunks.push(event.data); }; mediaRecorder.start(); } function stopRecording() { mediaRecorder.stop(); } ``` 4. 当用户点击“开始录制”按钮时,调用`startRecording()`函数开始录制;当用户点击“停止录制”按钮时,调用`stopRecording()`函数停止录制,并将录制的视频转换为Blob对象。 ``` document.getElementById('start').addEventListener('click', () => { startRecording(); }); document.getElementById('stop').addEventListener('click', () => { stopRecording(); const blob = new Blob(chunks, { type: 'video/webm' }); const videoURL = URL.createObjectURL(blob); // 将录制的视频显示在页面上 const recordedVideo = document.createElement('video'); recordedVideo.src = videoURL; document.body.appendChild(recordedVideo); }); ``` 5. 如果要兼容所有浏览器,可以在HTML中添加一个`<script>`标签,引入`@webcomponents/webcomponentsjs`库。 ``` <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.3/bundles/webcomponents-sd-ce.js"></script> ``` 这样就可以实现录制视频并兼容所有浏览器了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值