html5中返回TimeRanges对象的属性buffered


本文摘自PHP中文网,作者黄舟,侵删。

实例

获得视频的第一段缓冲范围(部分),以秒计:

1

2

3

myVid=document.getElementById("video1");

alert("Start: " + myVid.buffered.start(0)

+ " End: " + myVid.buffered.end(0));

定义和用法

buffered 属性返回 TimeRanges 对象。

TimeRanges 对象表示用户的音视频缓冲范围。

缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放,会得到多个缓冲范围。

浏览器支持

所有主流浏览器都支持 buffered 属性。

注释:Internet Explorer 8 或更早的浏览器不支持该属性。

语法

1

audio|video.buffered

描述
TimeRanges 对象

表示音视频的已缓冲部分。

TimeRanges 对象属性:

  • length - 获得音视频中已缓冲范围的数量

  • start(index) - 获得某个已缓冲范围的开始位置

  • end(index) - 获得某个已缓冲范围的结束位置

注释:首个缓冲范围的下表是 0。

实例一:audio中的buffered

Audio的缓存只有一个分段,开始位置为0,结束位置为timeRange.end(0)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<audio id="myAudio"></audio>

<script>

    var myAudio = document.getElementById('myAudio');

    myAudio.preload = true;

    myAudio.autoplay = true;

    myAudio.src = '../content/audio/海阔天空.mp3';

    myAudio.onplay = function () {

        console.info("开始播放");

    }

    myAudio.oncanplay = function () {

        console.info('进入可以播放状态');

        console.info('总长度:' + myAudio.duration);

    }

    //加载状态监听

    myAudio.ontimeupdate = function (e) {

        /*

        * Audio的缓存只有一个分段,开始位置为0,结束位置为timeRange.end(0)

        */

        //console.info(myAudio.buffered);

        //console.info(myAudio.buffered.length);

        // console.info('start:'+myAudio.buffered.start(0)+',end:'+myAudio.buffered.end(0));

        var timeRange = myAudio.buffered;

        console.info(timeRange);

        console.info('start:' + timeRange.start(0) + ',end:' + timeRange.end(0));

    }

</script>

以上就是html5中返回TimeRanges对象的属性buffered的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5语义化标签及兼容性处理详解

html5 虚拟键盘出现挡住输入框怎么办

用js+html5实现的小游戏-- 捕鱼达人游戏

html5面试题pc端和移动端区别

【h5开发工具】2017最好用的10种html5应用开发工具推荐

如何使用html5 canvas绘制动态线性渐变

html5实现app中监听返回事件如何处理

ios加载html5 audio标签时遇到的问题分享

带你了解什么是html5?

对于html5应用程序缓存application cache的知识点详解

更多相关阅读请进入《TimeRanges》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...