进入页面获取不到audio/video属性值问题

最新推荐文章于 2023-07-29 22:31:32 发布
最新推荐文章于 2023-07-29 22:31:32 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： html/CSS 文章标签： html5音频视频获取属性值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41804429/article/details/84821804
版权

有时候我们不用html5自带的视频/音频的控件，需要自定义， 这个时候可能就需要用到一些audio/video属性值。我们有个业务场景需要进入页面就获取音频的总时长， 但一直无法获取到，只有和页面产生交互才能获取，折腾了一段时间，总算解决了。 

当音频/视频处于加载过程中时，会依次发生以下事件：
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

通过监听除了loadstart, progress的其他事件，都可以获取到视频、音频的总时长duration的值。

海阔天空.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
An audio/video getinfo application-开源
05-10
获取文件信息avi vob mpeg mpg mov mkv ogm ogg ifo srt smi mp3 wmv
H5新属性audio音频和video视频的控制详解（推荐）
12-30
本文讲诉了H5新属性audio音频和video视频的控制，具体如下：  1.音频（audio） <audio controls=controls> <source src=这里面放入音频文件路径></source> </audio> 2.视频（video） <video controls=controls loop=loop autoplay=autoplay id=video> <source src=这里面放入视频文件路径></source> </video> <button>静音</button> <button>打开声音</button> <butto
HTML5 Video/Audio播放本地文件示例介绍
09-28
在得到用户允许后我们还是可以播放本地文件的，在页面中插入一个input节点并指定type为file，然后把该url设置为audio或video的src值即可
Audio/Video/Photo Guide-开源
05-27
该网站为读者提供了有关可用的免费工具的信息，这些工具可用于处理音频/视频和图像数据，例如VirtualDub，GhostScript，Gimp等。 以及有关常规采集，成像，录制和编辑音频/视频和pho的howtos和链接
关于＜audio＞标签及控制的问题
机智的奎哥的博客
09-05 968
开发框架：Vue 需求 ： 需要音乐在所有页面自动循环播放、不能遮挡fixd在底部的按钮。 解决方案：audio标签设置播放器，js控制audio在页面是否隐藏 <audio src="音频链接" autoplay="autoplay" loop="loop" controls="controls" class="audio" id="audio"> Your browser does not support the audio element. </audio&gt
如何获取视频与音频当前的时长，并设置时长
最新发布
Adios_0403的博客
07-29 1060
事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的。事件在视频 / 音频 （audio / video）当前的播放位置发送改变时播放。可读写，直接读就是获取播放时长，赋值即可设置当前播放时长。// 将存起来的时间取出，设置给播放时长，简单来讲：就是视频在播放时，将不断触发。此处用到了节流函数，每秒只会触发一次。简单来讲：刷新以及打开页面将会触发。// 把当前的时间存储到本地存储。// 打开即可跳转到上次播放位置。可以获取到，当前播放时长。
c++设置web browser 不检查证书_您不知道的12个HTML标签
weixin_39608301的博客
11-03 98
HTML（超文本标记语言）用于结合使用超文本和标记语言来设计网页。在这篇文章中，我们将看一些可以使用HTML完成的很酷的事情。让我们看一些html标记，您可能甚至不知道它们是否存在。应该利用今天。让我们开始吧 1.<figure>标签这可以用来标记照片。该<figure>元素也可以包含一个<figcaption>。<figure> <im...
vue-router的实现原理_手写Vuerouter核心原理，再也不怕面试官问我Vuerouter原理
weixin_39575170的博客
11-25 355
手写vue-router核心原理一、核心原理1.什么是前端路由？2.如何实现前端路由？二、原生js实现前端路由1.基于 hash 实现2.基于 history 实现三、基于Vue实现VueRouter四、剖析VueRouter本质五、分析Vue.use六、完善install方法七、完善VueRouter类八、完善$route九、完善router-view组件十、完善router-link...
audio在浏览器网页上无法自动播放解决方案
qq_43574079的博客
04-20 1512
Chorm76版本及以上更高版本音频播放设置 Chorm76版本以下音频播放设置 输入地址chrome://flags/#autoplay-policy 设置Autoplaypolicy为No user gesture is required。 改完记得刷新页面
2022-12-13 工作记录--Vue/JS-音乐的播放与关闭
weixin_48850734的博客
12-13 1160
Vue/JS-音乐的播放与关闭
21 QAudioOutput放音的坑与解决方法
热门推荐
jklinux的博客
05-22 1万+
其实在写博文http://blog.csdn.net/jklinux/article/details/72355485时，并没有测试放音,原以为就是一件很容易的事. 为了后期写音视频播放器时可以在QT用QAudioOutput放音(基本上所有案例都是调用SDL放音), 确定可行性。实实在在测试了一回，真的发现了问题。 QAudioOutput *aoutput = new QAudio
Linux(UOS) Qt不能播放音频的问题
hw5230的博客
03-17 522
这里可以看几项对于audio的编译配置，主要是前两个，在linux x86环境下通过Qt 安装包安装的目录下，插件audio中可以看到两个库，libqtaudio_alsa.so 和 libqtmedia_pulse.so ，其中音频播放需要用到前面一个库，那对应的编译参数就需要加上 -alsa ，视频播放需要后面那个库，编译参数指定 -pulseaudio。如果是linux x86的话 通过Qt安装包会自动包含audio的插件，但是如果通过Qt源码编译安装，那就需要自己指定编译参数后才会编译生成该插件。
audio_native层 | 获取音频输出getOutput和设置
qq_38091632的博客
12-03 2420
本文参考了TaigaComplex求职中的博文，结合自己目前看的代码，分析下getoutput的调用流程。 目录AudioTrack获取moutputAudioTrack的moutput初始化AudioSystem::getOutputForAttrAudioPolicyService::getOutputForAttrAudioPolicyManager::getOutputForAttrAud...
Android Audio代码分析7 - stream type
mmdev
10-07 501
在看AudioTrack代码的时候，我们看到，要创建一个AudioTrack对象，需要指定一个StreamType。 今天我们只把stream type相关的代码抽取出来，详细看看stream type相关的东东。 java层的代码就不看了。 从函数android_media_AudioTrack_native_setup开始说起。 static int android_media_Au...
【vue】audio/video标签动态绑定src改变后不刷新
xms_can_fly的博客
06-09 909
audio/video标签动态修改src
audio解决不能自动播放问题
天宁的博客
10-24 1245
无法实现打开网页就能自动播放音乐正常情况下使用autoplay即可实现自动播放,但是现在打开网页该参数无效。
html audio添加回调,webAudio和domAudio的区别（部分移动浏览器内，Audio 的回调缺失）...
weixin_32700139的博客
06-23 478
DOM Audio一般的浏览器都支持 Audio 标签的方式播放音频。引擎内的 DOM Audio 模式通过创建 Audio 标签来播放一系列的声音。但是在某些浏览器上可能会出现下列情况：部分移动浏览器内，Audio 的回调缺失，会导致加载时间偏长的问题。所以我们尽量推荐使用 WebAudio。iOS 系统上的浏览器，必须是用户主动操作的事件触发函数内，才能够播放这类型的音频。使用 javascr...
项目总结（关于audio音频标签的使用和在angular4.0中使用过程中的一些坑）
时清云的博客
06-27 4219
马上又到月底了，又一波新的需求又要来临了。所以趁此空隙把之前这一个月的心得和遇到的问题写一下 因为项目中有一个资讯转语音的功能，也就是把一篇文章转化为语音播放。至于怎么转化，这个是由后台这边转化好之后，发送了一个url音频地址给前端，由前端直接加载到audio标签的src属性上。 audio标签的使用这个可以直接参考w3c的文档 例如： &amp;amp;amp;amp;amp;lt;audio src=&amp;amp;amp;amp;quot;/i/horse.og...
vue $refs 无法动态拼接，获取不到对象（转）
qq_36448844的博客
09-10 1848
vue $refs 无法动态拼接，获取不到对象（转） 本篇文章给大家带来的内容是关于vue $refs中不使用拼接的原因以及解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 <li class="audio-item media" v-if="item.type == 3" @click="handleClearInterval(item.id)">...
Qmediaplayer获取/home/audio/目录下的音频文件时间并显示列表
06-01
您可以使用QDir和QFileInfo类来遍历/home/audio目录下的所有音频文件，然后使用QMediaPlayer类获取音频文件的时长并将其显示在列表中。 以下是一个示例代码，可以帮助您实现此功能： ```cpp #include <QApplication> #include <QDir> #include <QFileInfo> #include <QMediaPlayer> #include <QMediaMetaData> #include <QStandardItemModel> #include <QTableView> int main(int argc, char *argv[]) { QApplication a(argc, argv); // 创建一个标准项模型 QStandardItemModel model; model.setHorizontalHeaderLabels({"文件名", "时长"}); // 遍历/home/audio目录下的所有音频文件 QDir audioDir("/home/audio"); QStringList audioFilters; audioFilters << "*.mp3" << "*.wav" << "*.aac"; // 这里可以添加更多的音频格式 const auto audioFiles = audioDir.entryList(audioFilters, QDir::Files | QDir::Readable); for (const auto &audioFile : audioFiles) { QFileInfo fileInfo(audioDir, audioFile); // 使用QMediaPlayer类获取音频文件的时长 QMediaPlayer mediaPlayer; mediaPlayer.setMedia(QUrl::fromLocalFile(fileInfo.absoluteFilePath())); mediaPlayer.metaDataChanged(); // 使QMediaPlayer类更新元数据 mediaPlayer.play(); // 播放音频以获取时长 const auto duration = mediaPlayer.duration(); mediaPlayer.stop(); // 将音频文件的信息添加到模型中 QList<QStandardItem*> items; items << new QStandardItem(audioFile); items << new QStandardItem(QTime(0, 0, 0).addMSecs(duration).toString("hh:mm:ss")); model.appendRow(items); } // 创建一个表格视图并设置模型 QTableView tableView; tableView.setModel(&model); tableView.resizeColumnsToContents(); tableView.show(); return a.exec(); } ``` 这段代码会在表格视图中显示/home/audio目录下所有音频文件的信息，包括文件名和时长。注意，这段代码只能获取文件的元数据，因此如果音频文件没有元数据，则无法正确显示时长。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值