精华内容
下载资源
问答
  • HTML5视频元素video在加载的时候获取不到duration的问题???
    千次阅读
    2018-07-17 15:56:09

    问题描述:当加载的时候获取video对象的duration时长为NaN?

    解决办法:

    1.直接在定时函数中获取:

    setInterval(function(){
        console.info(video.duration);
        span.innerHTML=video.duration;
    },1000);

    2.直接监听canplay事件获取:

    canplay:当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件。

    video.oncanplay=function(){
        console.info(video.duration);
        span.innerHTML=video.duration;
    }

    3.onloadedmetadata :事件在指定视频/音频(audio/video)的元数据加载后触发。

    视频/音频(audio/video)的元数据包含: 时长,尺寸大小(视频),文本轨道。

    video.onloadedmetadata=function(){
        console.info(video.duration);
        span.innerHTML=video.duration;
    }

    以上3种方法均可以获取当前的视频时长duration.

    更多相关内容
  • 在创建一个vue项目时,获取标签中duration属性值为空或者未定义的情况,针对以上可能出现的两种情况,本文给出作者本人的一些实践成功后的方法。
  • 在vue中audio标签借助refs时候获取duration返回NaN

    最近进行音乐网站开发,遇到了想借用audio的duration来获取歌曲总时长,但是返回来一直是NAN,查询了半天也没有出结果。

    然后我自己观察到,只有我点击过快时候出现了NAN,个人猜测可能是因为获取歌曲时候,进度条没有加载完,也就是说在歌曲还没加载完,我们就去获取总时长

    奈何本人技术不好,最后想到定时器,设置 两秒时间,这样就可拿到数据了

     setTimeout(() => {
                    console.log(this.$refs.audio.duration)
                }, 2000);

    以上方法也能获取,今天询问了一下朋友,终于找到正确的方法了。

    拿到NAN是因为音乐未加载完成,这时候需要在audio标签添加

    @canplay="canplay"

    这样我们在下面canplay(){

    //此处获取音乐总时长

    }

    前面

    <audio   :src="musicdetail.play_url" @canplay="canplaysong" autoplay="true"></audio>

    methods里面

    canplaysong(){
                let total=parseInt(this.$refs.audio.duration)
                    this.musictotaltimemode=total
                    let minute=total % 60
                    let seconds=(total-minute)/60
                    this.musictotaltime=seconds+':'+minute
            },

    这样就不会出现NAN了

    展开全文
  • HTML5 Audio Player Duration 在IOS兼容问题

    千次阅读 2018-06-23 18:45:47
    h5移动端项目使用audio标签时,在自己定义进度条时候遇到了duration兼容问题。在IOS端获取duration为NAN,安卓移动端显示正常。解决这一类办法增加一个事件监听就可以解决...

    h5移动端项目使用audio标签时,在自己定义进度条时候遇到了duration兼容问题。

    在IOS端获取duration为NAN,安卓移动端显示正常。

    解决这一类办法增加一个事件监听就可以解决

    let audio = new Audio();
    audio.src = ""; //audio链接
    audio.addEventListener('loadedmetadata', function() {
        console.log(audio.duration);
        //
    });
    重新定义一个新的标签即可,不过有时候会遇到别的audio事件操作,主要是拿到了duration值,别的就好说了
    展开全文
  • 解决audio元素获取duration为Infinity

    千次阅读 2020-12-18 15:34:01
    发现有些录音当取audio.duration时为infinity,影响自定义功能的实现,查阅了很多方法都不起作用,最后在国外论坛找到了可行的解决方案。 private async audioCanplay(e: any) { const firsthandAudio: ...

    最近开发录音相关功能

    发现有些录音当取audio.duration时为infinity,影响自定义功能的实现,查阅了很多方法都不起作用,最后在国外论坛找到了可行的解决方案。

        private async audioCanplay(e: any) {
          const firsthandAudio: HTMLAudioElement = e.target;
          while (firsthandAudio.duration === Infinity) {
            await new Promise(r => setTimeout(r, 200));
            firsthandAudio.currentTime = 10000000 * Math.random();
          }
          this.duration = firsthandAudio.duration;
        }

     

    展开全文
  • 小程序InnerAudioContext实例获取duration一直是0? 微信的小程序的开发 , 肯定时候总是会遇到一些奇怪的坑 , 让人无语 , 更让人无语的是微信社区的微信官方技术人员 , 在开发中遇到的很多问题基本状态就是发布完问题...
  • 获取video duration time

    千次阅读 2018-09-11 10:19:04
    获取 video 总时长的时候,在 js 中获取 video 元素然后在获取 duration获取不到的,即使加一个延迟也还是获取不到。 解决方法: 在 video 标签身上加 oncanplay 方法,在这个方法中就可以获取到视频的时...
  • 通过timeupdate钩子可实时监控audio 获取媒体总时长在canplay(浏览器可以开始播放该音视频)钩子函数回调中访问duration属性可获得(注:在dom挂载完直接获取duration会返回NaN)复制代码methods: {getDuration() {...
  • 切换下一首歌曲时,更改 audio 的 src 路径, 直接获取 duration 会得到 NaN 值 myaudio.src = 'music-2.mp3'; alert(myaudio.duration); 解决方法如下: myaudio.src = 'music-2.mp3'; myaudio.load(); ...
  • audio自动播放时获取duration为NaN

    千次阅读 2018-07-14 16:30:07
    audio的音频路径写死时没有问题 &lt;audio id="audio" autoplay&...当路径是从后台获取,动态加上的时候,播放的时候获取不到duration &lt;audio id="audio" aut
  • 转自:https://blog.csdn.net/chenjineng/article/details/77650870
  • js获取视频duration为NaN

    千次阅读 2018-10-12 11:28:13
    可能是浏览器的原因 &lt;video id="vl"&gt; &lt;source src="mv.mp4" type="video/mp4"&gt; 您的浏览器不支持此种视频格式。... alert(oV.duration)/
  • 的duration属性值的方式有很多,但是在某些特定的方式下去获取duration的值可能会出现NaN或者undefined的情况。 下面会列出获取duration的方式及注意事项 获取duration的方式及注意事项 方式一: 使用@绑定canplay...
  • videojs获取视频的duration

    千次阅读 2018-01-10 09:16:00
    http://jsbin.com/gixobexizi/edit?html,js,output 转载于:https://www.cnblogs.com/loveamyforever/p/8256874.html
  • new Audio()获取duration时长兼容性问题

    千次阅读 2020-05-19 19:30:52
    ios手机,小米自带浏览器有时候使用new Audio()方法创建音频条的时候总时长会展示不出来,所以本人是这样处理的,希望对大家用帮助 ... duration:'00:00' } }, methods:{ getInit(){ this.ap=new Au
  • 这个问题是这样产生的,一同事反应会随机出现ijk获取到的aac文件的duration不准,发来一看,确实不准,在AE或者系统mediaplayer中得到的都是8.4秒(准确时间是MtkAACExtractor: ADTS: duration = 8448000 us),ijk...
  • 移动端audio自动播及获取audio.duration

    千次阅读 2018-06-15 15:05:40
    最近需要在微信公众号上使用audio标签,在模拟器中测试没问题,放到手机端一看,坑爹啊,不会自动播放,且获取不到duration值,自制进度条没效果,于是从网上查看各大神博客,终于解决了这个问题,代码如下:&...
  • FFmpeg获取视频时长方法

    万次阅读 2018-07-23 09:42:12
    因此,只需要通过ffmpeg读取文件操作就可以获取视频时长信息。 此工程所用ffmpeg版本号为4.0.1 下载地址:https://ffmpeg.zeranoe.com/builds/ #include &lt;stdio.h&gt; extern "C"{ #include...
  • 先加load() myaudio.load(); myaudio.oncanplay = function () { ... alert(myaudio.duration);...load() 方法用于在更改来源或...duration 的值可以在 canplay 事件发生之前的 durationchange 阶段中获取。 m...
  • 产品分类: uniapp/小程序/微信 PC开发环境操作系统: Windows PC开发... 预期结果: 获取每个音频的长度,并可以进行快进等操作 实际结果: 在h5,微信开发者工具上都正常,到真机上就经常获取不到完整音频的时长。
  • 情况:用了ffmpeg把直播视频流录制为视频了,用ffmpeg -i d://a.mp4 查看视频的时长,结果获得了Duration: 00:00:00.00, start: 0.022000, bitrate: N/A 解决办法:用ffmpeg把这个视频再次转码换个名字就行 ffmpeg -...
  • QT关于QMediaplayer 的duration()获取的音视频时间长度为0的问题。   在QT中,使用QMediaplayer类可以很方便地实现视频的播放,而在QMediaplayer类中有个duration函数可以直接获取所打开视频的总时间长度。但使用...
  • Java 8 Duration 详解

    2020-12-20 14:49:38
    最近发现spring boot中的有些配置使用了 Duration,于是详细的看了 Duration这个类Duration是在 Java 8中加入的,主要是用来计算日期,差值之类的。Duration被声明final(immutable),并且线程安全。先看下 Duration...
  • google 搜索: safari audio target.duration infinity 解决问题: Safari 和 Chrome浏览器等其他浏览器不同 Safari 遇到audio时 Safari发出了两个请求: 第一次请求会形如(Range: bytes=0-1),只是尝试获取一些...
  • 想要做一个音乐播放效果,可是我动态改变audio的src后,在mounted里面获取autio的duration一直为NaN,结果我在updated 中获取duration,就可以得到正确的值,但是,我需要的效果时,已进入音乐播放的内页,时间就需要...
  • Java 8-Duration 详解

    千次阅读 2019-10-22 10:41:22
    最近发现spring boot中的有些配置使用了 Duration ,于是详细的看了 Duration 这个类 Duration 是在 Java 8中加入的,主要是用来计算日期,差值之类的。 Duration 被声明final(immutable),并且线程安全。 先看下 ...
  • var duration = document.getElementById("audio").duration; document.getElementById("ss").innerHTML=duration; } 通过服务器访问 获取到的值为NaN. 但如果通过页面上的一个按钮点击,以onclick事件,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,634
精华内容 47,453
关键字:

无法获取duration