html5 vedio 资源加载,html5中重新加载音频/视频元素的方法load()

实例

更改视频来源,并重载视频:document.getElementById("mp4_src").src="movie.mp4";

document.getElementById("ogg_src").src="movie.ogg";

document.getElementById("video1").load();

定义和用法

load() 方法重新加载音频/视频元素。

load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。

浏览器支持

所有主流浏览器都支持 load() 方法,除了 Safari。

注释:Internet Explorer 8 以及更早版本不支持该方法。

语法audio|video.load()

例子:

你的浏览器不支持HTML5 video.

点击“切换视频”按钮,加载新的视频

切换视频

var vid = document.getElementById("video1");

function myFunction() {

document.getElementById("mp4_src").src = "material/sample2.mp4";

document.getElementById("ogg_src").src = "material/sample2.ogv";

document.getElementById("video1").load();

}

要控制 HTML5 video 元素的播放和分段播放,你可以使用 JavaScript 操作 video 元素的属性和方法。以下是一些常用的属性和方法: 1. 控制播放和暂停 - `play()`: 开始播放视频 - `pause()`: 暂停视频播放 例如: ```javascript var myVideo = document.getElementById("my-video"); myVideo.play(); // 开始播放视频 myVideo.pause(); // 暂停视频播放 ``` 2. 控制视频播放位置 - `currentTime`: 获取或设置视频播放位置,单位为秒 例如: ```javascript var myVideo = document.getElementById("my-video"); myVideo.currentTime = 10; // 将视频播放位置设置为 10 秒 ``` 3. 控制视频播放速度 - `playbackRate`: 获取或设置视频播放速度,1 表示正常速度,2 表示两倍速度,0.5 表示半倍速度 例如: ```javascript var myVideo = document.getElementById("my-video"); myVideo.playbackRate = 2; // 将视频播放速度设置为两倍速度 ``` 4. 分段播放 你可以在视频播放期间监听 `timeupdate` 事件,获取视频当前播放位置,根据播放位置判断是否需要播放下一段视频。 例如: ```javascript var myVideo = document.getElementById("my-video"); var segments = [ { start: 0, end: 10 }, { start: 10, end: 20 }, { start: 20, end: 30 } ]; var currentSegment = 0; myVideo.addEventListener("timeupdate", function() { if (myVideo.currentTime > segments[currentSegment].end) { currentSegment++; if (currentSegment < segments.length) { myVideo.currentTime = segments[currentSegment].start; myVideo.play(); } } }); ``` 以上是一些常用的操作 video 元素方法,希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值