深入理解Video标签

更新日期: 2021-07-01阅读: 1.6k标签: 标签

Video相关属性

1、自动播放

目前主流浏览器加强了对自动播放策略(Autoplay)的限制:浏览器在没有交互操作之前不允许有声音的媒体文件自动播放。 而且各个浏览器关于自动播放策略有不同的实现。

{/* 自动播放 */}
<video ref={ videoRef } controls autoPlay />

为了解决自动播放失败,在这里介绍两种方法解决 Autoplay 限制的方案

播放失败时绕过 Autoplay 限制
直接绕过 Autoplay 限制

1.1 播放失败时绕过 Autoplay 限制

在实际使用中,页面并不是完全被 Autoplay 限制,随着用户使用这个页面的次数增加,浏览器会将这个页面加入自己的 Autoplay 白名单列表中。

根据这个原理,可在检测到播放失败时,引导用户点击页面上的某个位置来恢复播放。(Google浏览器下测试均播放失败)

// 可播放监听。当浏览器能够开始播放指定的音频/视频时触发
this.videoRef.addEventListener('canplay', () => {
    console.log('视频可以播放了')
    setTimeout(() => {
        // this.videoRef.paused 判断是否暂停,用来判断是视频是否在播放中,如果没有播放就
        console.log(this.videoRef.paused) 
        console.log('视频是否在暂停中', this.videoRef.paused) 
        this.isPlay = !this.videoRef.paused
    }, 500)
})

// 通过promise来判断是否在播放
const videoPromise = this.videoRef.play()
if(!!videoPromise) {
    videoPromise.then(() => {
        this.isPlay = true
        console.log('播放成功')
    }).catch(() => {
        this.isPlay = false
        console.log('播放失败')
    })
} else {
    // 此时可以通过canplay 监听是否在播放
}

1.2 直接绕过 Autoplay 限制

可以通过如下两种方案实现直接绕过 Autoplay 限制

在video标签中关闭静音muted属性设置为true。媒体不包含声音时不会被 Autoplay 限制。(引导用户开启声音)

UI上引导用户触发播放

注意:无论使用哪种方案,在自动播放策略的限制下,没有用户操作之前都不可能自动播放有声媒体。虽然浏览器会在本地维护一个白名单来决定对哪些网站解除自动播放限制,但该白名单无法通过 Javascript 探测到。

// 移动端
document.body.addEventListener('touchstart', () => {
    console.log('触发播放')
    this.videoRef.play();
})
// PC端
document.body.addEventListener('mousedown', () => {
    console.log('触发播放')
    this.videoRef.play();
})
// 微信端IOS手机下触发自动播放,大部分IOS能正常自动播放(安卓机只能通过touchstart触发播放)
document.body.addEventListener('WeixinJSBridgeReady', () => {
    console.log('触发播放')
    this.videoRef.play();
})

注意: Safari 只允许通过用户交互来触发有声媒体的播放,而不是在用户交互后就打开 Autoplay 限制。


2、播放时间属性控制

首先我们来看一段代码,在Google端能够正常播放,但是在移动端和Safari中还是重头开始播放。使用了canplay 和loadedmetadata,oncanplay事件来判断视频状态再设置currentTime,但移动端还是无效。

const videoPromise = this.videoRef.play()
this.videoRef.currentTime =  10

解决方案:

设置视频的Timeupdate事件监听设置播放时间

使用定时器设置播放时间

this.videoRef.play();   
// 通过时间更新播放时间
let timer = setTimeout(function(){
    // 这里还是有一定的缺陷,如果用户触发了视频播放,但是加载比较长就会有问题
    this.videoRef.currentTime = 需要设置的时间;
    clearTimeout(timer);
},200);

// timeupdate:目前的播放位置已更改时,播放时间更新
this.videoRef.addEventListener('timeupdate', (e) => {
    console.log('timeupdate')
    let timeDisplay = Math.floor(this.videoRef.currentTime);
    if(timeDisplay > 0){
        if(this.firstOpen){
            this.videoRef.currentTime = 10;
            this.firstOpen = false;
        }	
    }
})

// seeking:查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
this.videoRef.addEventListener('seeking', (e) => {
    // 在这里处理视频播放是否播到放指定的时间
    console.log('开始移动进度条', this.videoRef.currentTime)
})

// seeked:查找结束。当用户已经移动/跳跃到视频中新的位置时触发
this.videoRef.addEventListener('seeked', (e) =>  {
    console.log('进度条已经移动到了新的位置', this.videoRef.currentTime)
})

其他属性介绍:

this.videoRef.error; //null:正常

this.videoRef.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

this.videoRef.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源

this.videoRef.buffered; //返回已缓冲区域,TimeRanges

this.videoRef.paused; //是否暂停

this.videoRef.defaultPlaybackRate = value;//默认的回放速度,可以设置

this.videoRef.playbackRate = value;//当前播放速度,设置后马上改变

this.videoRef.played; //返回已经播放的区域,TimeRanges,

this.videoRef.seekable; //返回可以seek的区域 TimeRanges

this.videoRef.ended; //是否结束


Video相关事件

了解Video 标签相关事件触发时机,才能处理好业务相关逻辑。

// loadstart 视频查找。当浏览器开始寻找指定的音频/视频时触发,也就是当加载过程开始时
this.videoRef.addEventListener('loadstart', (e) => {
    console.log('提示视频的元数据已加载')
    // console.log(e)
    console.log(this.videoRef.duration)            // NaN
})

// durationchange 时长变化。当指定的音频/视频的时长数据发生变化时触发,加载后,时长由 NaN 变为音频/视频的实际时长
this.videoRef.addEventListener('durationchange', (e) => {
    console.log('提示视频的时长已改变')
    console.log(this.videoRef.duration)           // 视频的实际时长(单位:秒)
})

// loadedmetadata :元数据加载。当指定的音频/视频的元数据已加载时触发,元数据包括:时长、尺寸(仅视频)以及文本轨道
this.videoRef.addEventListener('loadedmetadata', (e) => {
    console.log('提示视频的元数据已加载')
    // console.log(e)
})

// loadeddata:视频下载监听。当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时触发
this.videoRef.addEventListener('loadeddata', (e) => {
    console.log('提示当前帧的数据是可用的')
})

// progress:浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
this.videoRef.addEventListener('progress', (e) => {
    console.log('提示视频正在下载中')
})

// canplay:可播放监听。当浏览器能够开始播放指定的音频/视频时触发
this.videoRef.addEventListener('canplay', (e) => {
    console.log('视频可以播放了')
    setTimeout(() => {
        // this.videoRef.paused 判断是否暂停
        console.log('视频是否在暂停中', this.videoRef.paused) 
        this.isPlay = !this.videoRef.paused
    }, 1000)
})

// canplaythrough:可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
this.videoRef.addEventListener('canplaythrough', (e) => {
    console.log('提示视频能够不停顿地一直播放')
    console.log(e)
})

// play: 播放监听
this.videoRef.addEventListener('play', (e) => {
    console.log('提示该视频正在播放中')
})

// pause:暂停监听
this.videoRef.addEventListener('pause', (e) => {
    console.log('暂停播放')
})

// seeking:查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
this.videoRef.addEventListener('seeking', (e) => {
    // 在这里处理到底有没有更新到最新的位置
    console.log('开始移动进度条', this.videoRef.currentTime)
})

// seeked:查找结束。当用户已经移动/跳跃到视频中新的位置时触发
this.videoRef.addEventListener('seeked', (e) =>  {
    console.log('进度条已经移动到了新的位置', this.videoRef.currentTime)
})

// waiting:视频加载等待。当视频由于需要缓冲下一帧而停止,等待时触发
this.videoRef.addEventListener('waiting', (e) => {
    console.log('视频加载等待')
    console.log(e)
})

// playing:当视频在已因缓冲而暂停或停止后已就绪时触发
this.videoRef.addEventListener('playing', (e) => {
    console.log('playing')
    console.log(e)
})

// timeupdate:目前的播放位置已更改时,播放时间更新
this.videoRef.addEventListener('timeupdate', (e) => {
    // console.log('timeupdate')
    // let timeDisplay = Math.floor(this.videoRef.currentTime);
    // if(timeDisplay > 0){
    //     if(this.firstOpen){
    //         this.videoRef.currentTime = 10;
    //         this.firstOpen = false;
    //     }	
    // }
})

// ended:播放结束
this.videoRef.addEventListener('ended', (e) => {
    console.log('视频播放完了')
    console.log(e)
})

// error:播放错误
this.videoRef.addEventListener('error', (e) => {
    console.log('视频出错了')
    console.log(e)
})

// volumechange:当音量更改时
this.videoRef.addEventListener('volumechange', (e) => {
    console.log('volumechange')
    console.log(e)
})

// stalled:当浏览器尝试获取媒体数据,但数据不可用时
this.videoRef.addEventListener('stalled', (e) => {
    console.log('stalled')
    console.log(e)
})

// ratechange:当视频的播放速度已更改时
this.videoRef.addEventListener('ratechange', (e) => {
    console.log('ratechange')
    console.log(e)
})

关于微信H5视频兼容介绍: 移动端兼容


最后

移动端Web对于Video自动播放的兼容性是在太差,尤其安卓。各种问题,各种兼容,各种心累。

本文到此结束。希望对你有帮助。


作者:华仔专业打杂
链接:https://juejin.cn/post/6979881494189703199
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


链接: https://www.fly63.com/article/detial/10490

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!