video标签只播放返回视频资源的一部分

需求：请求回来的视频资源，要求页面预览只展示根据返回的起始时间部分的视频；

              <videoclass="elementV"ref="customVideoPreview":data-copyid="item.copy_id"v-if="item.element_type === 3":src="item.videoInfo.url"controls@timeupdate="timeupdate(item.videoInfo, item.copy_id)"controlslist="nodownload noremoteplayback"style="width: 100%"/>

这个视频预览是弹窗预览，所以通过show弹窗时，把后端返回的播放初始时间赋予当前video的currentTime,播放速率也一样（playbackRate）；

    previewClick(v, id) {// 弹窗展示this.$refs['videoPreviewEle'].filter(i => i?.$attrs?.copyId == id)[0].preview()// 渲染后赋值this.$nextTick(() => {// 获取当前的videoconst el = this.$refs['customVideoPreview'].filter(i => i.dataset.copyid == id)[0]if (el) {// currentTime赋值/playbackRate赋值el.currentTime = v.currentTimeel.playbackRate = v.playbackRate}})},

初始时间处理好了，结束时间也要进行赋值，可以通过video多媒体方法timeupdate监控设置：

    timeupdate(v, id) {// 获取当前的videoconst el = this.$refs['customVideoPreview'].filter(i => i?.dataset?.copyid == id)[0]if (el) {// 判断当前video的currentTime 是否大于或等于接口要求播放的结束时间if (el.currentTime >= v.endTime) {// 如果当前video的currentTime大于或等于接口播放要求的结束时间，则重新将当前的video的            currentTime设置为开始的初始时间el.currentTime = v.currentTime// pause则暂停el.pause()// play则播放，体现效果就是类似循环播放// el.play()}}},

这时候要弹窗关闭展开时对video的处理：

    show(v, id) {// 获取当前的video元素const el = this.$refs['customVideoPreview'].filter(i => i?.dataset?.copyid == id)[0]// 判断v为true则弹窗展示，video播放；false则隐藏，video暂停if (v) {el.play()} else {el.pause()}}

over，以此笔记！！

video标签只播放返回视频资源的一部分相关推荐

html5网页中用video标签无法播放MP4视频的解决方法
为了避免大家遇到同样的问题我在这里就给大家普及一下html5关于标签的知识吧: 在使用html4协议做网站时我们想要在网页上播放一个视频要不使用flash去播放,要么就是嵌入式页面来实现,对于html ...
关于微信浏览器video标签无法播放mp4视频
开发微信公众号是遇到一个很无解的问题首先在服务器端上传了一个mp4格式的视频然后再pc或手机其他浏览器中都可以播放该视频:唯独在微信浏览器解析不到解决方法: 可能是微信浏览器找不到该视频在服务器 ...
关于html5的video标签不能播放视频的问题及解决方法
最近实习过程中遇到了音频视频流的格式问题,进行了一些学习和总结. 问题背景使用html5中的 video 标签去播放视频,但是发现有的flv/mp4格式的视频可以播放,有的flv/mp4格式的视频不 ...
html5 video标签不能播放视频,h5 video 视频不能正常播放
在页面中用video标签嵌入了一个视频: 其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的. 这个页面用ios自带的浏览器和qq直接打 ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
video标签无法播放视频
现象:使用video播放视频,在ios上能播放,但是在浏览器和安卓上不能播放前置条件: 1.network没有该视频的下载 2.通过在媒体元素中添加<source>元素而不是设置src属 ...
uniapp使用video标签无法播放视频出现黑屏问题处理
uniapp使用video标签无法播放视频出现黑屏问题处理问题出现情况并且点击播放后出现报错解决办法问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使 ...
HLS播放：html5下用video标签来播放m3u8格式的视频
HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...
JavaScript基于MediaRecorder录制mp4视频或webm视频并下载，JavaScript实现对video标签进行录制mp4视频或webm视频和下载
前言本章实现网页video标签录制mp4视频或webm视频并下载. 视频录制这种计算密集型任务比较重,比较适合放在后台进行实现,本章适合前端任务不太重的短时间视频录制,长时间录制建议还是走后台录制并 ...

video标签只播放返回视频资源的一部分

video标签只播放返回视频资源的一部分相关推荐

最新文章

热门文章