vue 中使用 video 标签链接为OSS地址，有些显示音频时长有些没有

已于 2022-04-19 14:59:30 修改
阅读量623 收藏
点赞数
分类专栏： video标签 文章标签： 前端 html5
于 2022-04-19 14:57:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/momo_mom177/article/details/124273838
版权

文件问题，因为上传到OSS的文件拿出来的时候是转过的，所以不能直接显示时长，而有些可以显示时间，因为文件比较小， 实际上OSS稍大的文件貌似是分片获取的，当文件较小的时候，一次请求就获取完整了，所以时间能够显示

momo_mom177
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue项目中获取的duration属性值为NaN或者undefined.md
11-24
在创建一个vue项目时，获取标签中duration属性值为空或者未定义的情况，针对以上可能出现的两种情况，本文给出作者本人的一些实践成功后的方法。
【已解决】video标签不会自动播放问题
麻瓜哇哇哇的博客
12-28 4061
今天在写一个视频组件的时候，写了autopaly但还是不会自动播放，于是我就去MDN上搜了一下，果真是找到了答案，MDN给出的解释如下图所示： 很明显，我们只需要加上muted属性就可以自动播放了，muted属性是限制声音的打开与关闭的意思。 ...
html5 video 播放状态,10分钟了解HTML5的Video标签属性、方法和事件
weixin_39860123的博客
06-02 2733
标签的属性src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度html 代码//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象获取video对象Media = document.getElementB...
video标签隐藏对应元素
paopao180的博客
09-16 1092
video标签的controls属性添加时，会出现时间轴，播放时间，总时间，音量调节，全屏等控件元素。有时候只想保留其中一种或几种，对应的css如下 // 隐藏video 音量按钮 video::-webkit-media-controls-mute-button { display: none !important; } // 隐藏video 当前按钮 video::-webkit-media-controls-current-time-display { display: none !i
解决video标签在浏览器上无法显示画面的问题
qq_45803168的博客
05-25 6295
解决video标签在浏览器上无法显示画面的问题 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 解决方案：修改视频的编码格式 首先下载QQ影音 用QQ影音打开出现问题的视频，先暂停，点击如下按钮 按如上图所示修改相应参数，点击添加文件可以同时修改多个文件的编码格式。选择转码后文件的保存路径，点击开始即可。 再次使用video标签，选择转码后的视频路径即可在浏览器中看见视频画面啦。 ...
上传时获取video视频时长
qq_43803680的博客
03-31 2964
上传时获取video视频时长
html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间
weixin_34470566的博客
05-30 1317
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!DEMO DOWNLOADHTML5 Video 基...
＜video＞标签视频在chrome中,视频可以读到时长,但是无法播放
最新发布
weixin_43224069的博客
09-12 576
后端接口返回MP4文件给前端, 前端用'vdeo'标签展示视频, 但是有的视频能够正常播放, 有的视频只能读到秒数, 无法正常播放
解决：移动端H5的＜video＞初始化拿不到总时长
学习使我快乐_玉祥
07-30 751
在的初始化后，会调用如下事件。解决方案：添加自动播放属性：然后这个方法里，用js在0.01秒后主动关闭播放，接着在0.1秒之后获取视频总长度即可（这里用0.01秒有几率失败）。这样连视频的预览图都省了，哈哈哈😁😁😁😁😁。。。。
关于微信浏览器video不自动播放并且获取第一帧和总时长的问题
qq_35431814的博客
08-20 5053
关于微信浏览器video标签获取第一帧和总时长的问题 最近项目中需要上传视频并限制播放时长。还要展示第一帧画面 技术实现。通过Input file 获取上传的视频资源，读取之后转成blob，放到video标签上。然后获取第一帧和视频时长。 问题来了 在pc开发的时候。video标签可以自动获取到第一帧。然后video onloadeddata的方法。可以获取时间。 但是在微信端因为视频是不能自动播...
vue页面使用阿里oss上传功能的实例（一）
08-29
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中使用bpmn为节点添加颜色的方法
10-15
主要介绍了vue项目中使用bpmn为节点添加颜色的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue中音频wavesurfer.js的使用方法
10-15
主要为大家详细介绍了vue中音频wavesurfer.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue项目中自定义video视频控制条的实现代码
11-21
最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。 首页效果图：   需求描述： 当鼠标放在图片上的时候，自动播放视频，并...
js获取video元素的视频时长并且不在页面显示视频元素
Hello World
08-15 2062
需求：页面只需要视频时长但不需要视频元素 video标签的属性duration能够获取视频的时长，但是需要先获取到视频元素video，再通过video.duration获取到对应视频元素的时长 解决办法：隐藏视频元素，仍然通过video.duration的方式获取到时长 // template: <div class="duration"> <video v-show="false" :src="1.mp4"></video> <span></spa
video标签显示问题
GahoYeung的博客
08-07 3605
最近在弄视频文件播放，出现了给video标签src赋视频文件路径，但是用来测试的mp4文件可以正常显示，而tup运行时生成的mp4文件却不能显示，video标签已经读取了mp4文件的资源，但是显示为空白。 经过百度，h5的video标签对于mp4格式视频文件只支持h264编码，与tup沟通后将生成编码转为h264可以正常读取显示， 以下是百度的结果 https://www.php.cn/di...
HTML 5 video 视频标签全属性详解
weixin_30876945的博客
02-25 3298
现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。 Vide...
video设置播放时间点及常用属性和方法
热门推荐
weixin_42333548的博客
12-03 2万+
video标签常用属性介绍，下面以vue中使用video标签来举例： 1、video标签常用属性 下面shareVideoLink为视频连接地址 <!--autoplay=>自动播放 controls=>是否显示控件 loop=>是否循环播放 muted=>是否静音播放 poster=>视频封面 src=>播放源 preload=>页面加...
html video标签控制栏组件显示操作 是否显示进度条、是否显示全屏按钮、是否显示下载、是否显示视频总时间、setting按钮
大家的blog
10-21 3720
video标签控制栏组件显示操作 在css中设置相关属性隐藏：video默认setting按钮,更改是否显示播放秒数,更改是否显示进度条,更改是否显示视频总时间,更改是否显示播放暂停按钮,更改是否显示下载按钮,更改是否显示全屏按钮,更改是否显示声音,更改是否显示音量的控制条,整个控制栏都隐藏掉,重置audio和video的边框和圆角样式
vue中使用video标签不起作用
08-26
对于Vue中使用video标签无法正常工作的问题，您可以检查以下几个方面： 1. 确认是否引入了Vue的模板语法：在使用video标签之前，确保您正确地引入了Vue.js并使用了Vue的模板语法，例如使用v-bind绑定属性或使用v-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值