网页播放器js代码 js播放器是什么( 三 ) _生活百科

那么咱们换个观点，从新凝视一下直播的播放/休憩论理。
直播干什么须要休憩？拿咱们视频监察和控制来说，一个页面会放好几个摄像头的监察和控制视频，即使每个播放器从来与效劳器维持贯穿，连接拉流，这会形成洪量的贯穿和耗费，流逝的都是白茫茫的银子。
那咱们是否不妨如许：进去网页的功夫，找到想看的摄像头，点击播放再拉流。当你不想看的功夫，点击休憩，播放器割断贯穿，如许是否就会俭朴无效的流量耗费。
所以，直播中的播放/休憩，中心论理是拉流/断电。
领会到这边，那咱们的计划该当是湮没 video 的休憩/播放按钮，而后本人实行播放和休憩的论理。
仍旧之上述代码为例，播放器范例（上头的 flvPlayer 变量）不必变，播放/休憩代码如次：
const onClick = isplay => {// 参数 isplay 表白暂时能否正在播放if (isplay) {// 在播放，断电player.unload()player.detachMediaElement()} else {// 已断电，从新拉流播放player.attachMediaElement(videoEl.current)player.load()player.play()}}特殊处置
用 flv.js 接入直播流的进程会遇到百般题目，有的是后端数据流的题目，有的是前者处置论理的题目。由于流是及时获得，flv 也是及时变化输入，所以一旦爆发缺点，欣赏器遏制台会轮回贯串的打字与印刷特殊。
即使你用 react 和 ts，满屏特殊，你都没辙开拓下来了。再有直播流从来就大概爆发很多特殊，所以缺点处置特殊要害。
官方对特殊处置的证明不太鲜明，我大略归纳一下：
开始，flv.js 的特殊分为两个级别，不妨看作是头等特殊和二级特殊。
再有，flv.js 有一个特出之处，即是它的事变和缺点都是用列举来表白，如次：
flvjs.Events：表白事变flvjs.ErrorTypes：表白头等特殊flvjs.ErrorDetails：表白二级特殊底下引见的特殊和事变，都是鉴于上述列举，你不妨领会为是列举下的一个 key 值。
头等特殊有二类：
NETWORK_ERROR：搜集缺点，表白贯穿题目MEDIA_ERROR：媒介缺点，*** 或解码题目OTHER_ERROR：其余缺点二级级特殊常用的有二类：
NETWORK_STATUS_CODE_INVALID：HTTP 状况码缺点，证明 url 地方有误NETWORK_TIMEOUT：贯穿超时，搜集或后盾题目MEDIA_FORMAT_UNSUPPORTED：媒介 *** 不扶助，普遍是流数据不是 flv 的 *** 领会那些之后，咱们在播放器范例上监听特殊：
// 监听缺点事变flvPlayer.on(flvjs.Events.ERROR, (err, errdet) => {// 参数 err 是头等特殊，errdet 是二级特殊if (err == flvjs.ErrorTypes.MEDIA_ERROR) {console.log('媒介缺点')if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {console.log('媒介 *** 不扶助')}}if (err == flvjs.ErrorTypes.NETWORK_ERROR) {console.log('搜集缺点')if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {console.log('http状况码特殊')}}if(err == flvjs.ErrorTypes.OTHER_ERROR) {console.log('其余特殊：', errdet)}}除此除外，自设置播放/休憩论理，还须要领会加载状况。不妨经过以次本领监听视频流加载实行：
player.on(flvjs.Events.METADATA_ARRIVED, () => {console.log('视频加载实行')})款式定制
干什么会有款式定制？前方咱们说了，直播流的播放/休憩论理与点种各别，所以咱们要湮没 video 的操纵栏元素，经过自设置元从来实行关系功效。
开始要湮没播放/休憩按钮，进度条，以及响度按钮，用 css 实行即可：
/* 一切控件 */video::-webkit-media-controls-enclosure {display: none;}/* 进度条 */video::-webkit-media-controls-timeline {display: none;}video::-webkit-media-controls-current-time-display {display: none;}/* 响度按钮 */video::-webkit-media-controls-mute-button {display: none;}video::-webkit-media-controls-toggle-closed-captions-button {display: none;}/* 响度的遏制条 */video::-webkit-media-controls-volume-slider {display: none;}/*播放按钮 */video::-webkit-media-controls-play-button {display: none;}播放和休憩的论理上头讲了，款式这边自设置一个按钮即可。除此除外咱们还大概须要一个全屏按钮，看一下全屏的论理如何写：
const fullPage = () => {let dom = document.querySelector('.video')if (dom.requestFullscreen) {dom.requestFullscreen()} else if (dom.webkitRequestFullScreen) {dom.webkitRequestFullScreen()}}其余自设置款式，比方你要做弹幕，在 video 上头盖一层元素自行实行就不妨了。

网页播放器js代码 js播放器是什么( 三 )

推荐阅读

孩子有了个假想中的朋友，家长速度反思是否平时忽略了孩子？

常见的美系车品牌有哪些美国汽车品牌排行榜前十名

这些生肖最喜欢送对方定情信物？

吉利博越m挡什么时候用吉利博越M挡有什么用

分享华为手机换电池步骤华为智能手机怎么换电池教程

女人排毒吃什么最好女生吃什么排毒

南京有红宝石蛋糕店吗，红宝石蛋糕店

裤子掉档是什么意思啊裤子掉档的怎么处理

传奇三新手必看攻略传奇3地图新手怎么样玩

黑衣人迅雷黑衣人迅雷mp4下载

哈弗m6车身颜色有几种哈弗M6有哪几种颜色

灵芝红枣水的功效灵芝红枣水的正确煮法

2022呼和浩特疫情期间地铁进站乘车最新要求

身体突然长胖是因为缺乏什么因素吗？

一带一路什么意思一带一路是指什么

亚历山大大帝东征最远到达了哪里

蛋白质粉里含雌激素吗？蛋白质粉中会含有雌激素吗

有没有哪些相亲渠道免费且靠谱？

迢迢牵牛星中脉脉的意思

分享29个营销理论什么是色彩营销？