vue中使用video标签播放FLV总结

Audio/Video 标签属性及自定义（进度条、播放、快进、全屏） - SeaJson - 博客园 (cnblogs.com)

//全屏按钮video::-webkit-media-controls-fullscreen-button {display: none;}//播放按钮video::-webkit-media-controls-play-button {display: none;}//进度条video::-webkit-media-controls-timeline {display: none;}//观看的当前时间video::-webkit-media-controls-current-time-display{display: none;            }//剩余时间video::-webkit-media-controls-time-remaining-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-enclosure{ display: none;}

常用的一些 video API"视频播放":video.play();"视频暂停播放":video.pause();"视频地址":video.currentSrc;"视频总时长":video.duration;"视频播放速率":video.playbackRate;"是否暂停":video.paused;"是否结束":video.ended;"是否静音":video.muted;  "当前播放时间": video.currentTime;"当前缓冲量":video.buffered.end(0);"当前音量":video.volume

自定义播放暂停按钮，使用$refs 去指定元素，绑定监听事件,名字根据实际修改

最后发现video标签在未播放出flv流时有播放速度选项，选择之后流出来居然有影响，果断禁掉

(1条消息) video标签；浏览器溢出功能禁用；三个点中的功能禁用；禁用罕见的功能‘播放速度‘；禁用右键；__套码的汉子的博客-CSDN博客_disablepictureinpicture

标签中加controlslist="nodownload noremoteplayback noplaybackrate"

播放FLV流按钮代码

if(this.player != null){this.player.pause();this.player.unload();this.player.detachMediaElement();this.player.destroy();this.player = null}if (flvjs.isSupported()) {let video = this.$refs.player;if (video) {this.player = flvjs.createPlayer({type: "flv",isLive: true,hasAudio:false,hasVideo:true,url:this.rtsp_url},{enableWorker: false,enableStashBuffer: false, // false 延时低stashInitialSize: undefined,isLive: false,});this.player.attachMediaElement(video);try {this.player.load();this.player.play();} catch (error) {alert("播放失败")console.log(error);};}}

在播放中将网页最小化或者出现弹框提示时预览会暂停，所以需要定时检测，将画面跳回来

mounted(){this.$refs.player.addEventListener("play",this.handlePlay)this.$refs.player.addEventListener("pause",this.handlePause)this.timer = setInterval(()=>{if(this.player != null){if (this.player.buffered.length != 0) {let end = this.player.buffered.end(0);      //获取当前buffered值let diff = end - this.player.currentTime;   //获取buffered与currentTime的差值if (diff >= 0.5) {                          //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定this.player.currentTime = this.player.buffered.end(0) - 0.2;          //手动跳帧}}}else{this.video_play()}},10000)this.video_play()},beforeDestroy(){clearInterval(this.timer);this.timer = nullif(this.player != null){this.player.pause();this.player.unload();this.player.detachMediaElement();this.player.destroy();this.player = null}}

DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0)

这个错误是因为if (this.player.buffered) 这个判断没写对，将它改成if (this.player.buffered.length != 0) 就行了。

在beforeDestroy()中记得销毁flv和定时器，如果没有销毁会报错。

vue中使用video标签播放FLV总结相关推荐

html 中利用video标签播放mp4文件
如下是一个简单的html 中,用video标签播放mp4视频的示例: 点击视频即可进行播放 <html><head><title>camera</title& ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
vue中使用video标签插入视频并自动播放
一.效果: 使用video标签的好处是,视频周围没有黑边,观看效果好看二.html: <div v-for="(item,i) in vedioList" :key=&q ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）
有时候我们在做项目的过程中会遇到这样的需求: 使用H5中的video标签播放一个视频,并在视频的中心位置放置一个暂停的图标,点击后视频播放,图标消失:再次点击后,视频暂停,图标出现. 想要的效果,例下 ...
mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px; 转载于:https://www.cnblogs ...
安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决
诞生背景众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
html ios 视频播放不了,html中的video标签在ios微信中无法播放的解决方法之一
html中的video标签在ios微信中无法播放的解决方法之一发布时间:2020-07-16 22:41:04 来源:51CTO 阅读:2652 作者:lixiaoyu1223 最近在做一个微信企业 ...
如何将uni-app中video标签播放按钮隐藏
uni-app中video标签播放按钮隐藏的坑... 项目需求是将视频放在展示列表上,刚开始的思路是直接将视频的首帧截取出来放在列表上,后来发现此方法实在太过麻烦.于是直接使用了video标签,将视频 ...

vue中使用video标签播放FLV总结

vue中使用video标签播放FLV总结相关推荐

最新文章

热门文章