h5 video方法,事件,属性详解

闲下来的的时间里,我一直总结之前学习过的知识,今天到video,发现对它还是不够熟悉,于是重新学习一遍。

举个例子:

<video id="video1" width="380" style="margin-top:15px;">
     <source src="video/movie.ogg" type="video/ogg"/>
     <source src="video/movie.mp4" type="video/mp4"/>
      Don't support!
</video>

虽然给video标签添上controls属性,就可以正常使用了,但是往往我们需要重置样式或者控制视频的播放,此时了解video的事件属性就非常有用了,现在我们来重新理一遍吧。

事件:play() ,pause(),load(),canPlayType()

let video = documnet.getElementById('video');
//检测该浏览器是否支持某种类型视频,例如MP4
let ability = video.canPlayType('video/mp4');//返回"probably","maybe",""
//播放
video.play();
//暂停
video.pause()
//加载,一般用于更改源,重新加载视频
video.src='other.mp4';
video.load();

属性:

currentSrc当前视频地址
currentTime视频已播放时间
videoWidth视频本身的宽度
videoHeight视频本身的高度
duration视频长度,流返回无限
ended是否播放结束
error媒体错误(null:正常)
paused是否停止
muted是否静音
seeking是否在seeking
volume音量
height播放框的高度
width播放框的宽度

以上都是官方文档里的一般属性,下面将补充一些属性

startTime开始时间,默认为0
defaultPlaybackRate默认回放速度
playbackRate当前播放速度

事件:

loadstart 客户端开始请求数据
progress 客户端正在请求数据
suspend 延迟下载
abort客户端主动终止下载(不是因为错误引起)
error请求数据时遇到错误
stalled网速失速
playplay()和autoplay开始播放时触发
pausepause()触发
loadedmetadata成功获取资源长度
loadeddata 
waiting等待数据,并非错误
playing开始回放
canplay可以播放,但中途可能因为加载而暂停
canplaythrough可以播放,视频全部加载完毕
seeking寻找中
seeked寻找完毕
timeupdate播放时间改变
ended播放结束
ratechange播放速率改变
durationchange资源长度改变
volumechange音量改变

此时,就可以依靠各种属性以及事件方法来重置视频的央视是以及功能了>.<

  • 9
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是html视频声音控制的代码: ```html <!DOCTYPE html> <html> <head> <title>视频声音控制</title> </head> <body> <!-- 视频 --> <video id="myVideo" width="640" height="360" controls> <source src="myVideo.mp4" type="video/mp4"> <source src="myVideo.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <!-- 音量控制 --> <input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1" onchange="changeVolume()"> <!-- 播放/暂停按钮 --> <button onclick="playPause()">播放/暂停</button> <!-- 停止按钮 --> <button onclick="stop()">停止</button> <!-- 快进按钮 --> <button onclick="fastForward()">快进</button> <!-- 慢放按钮 --> <button onclick="slowMotion()">慢放</button> <script> var myVideo = document.getElementById("myVideo"); var volumeRange = document.getElementById("volumeRange"); function changeVolume() { myVideo.volume = volumeRange.value; } function playPause() { if (myVideo.paused) { myVideo.play(); } else { myVideo.pause(); } } function stop() { myVideo.pause(); myVideo.currentTime = 0; } function fastForward() { myVideo.currentTime += 5; } function slowMotion() { myVideo.playbackRate = 0.5; } </script> </body> </html> ``` 在上面的代码中,我们使用了`<video>`标签来嵌入视频,并添加了`controls`属性来添加视频控制面板。我们还使用了`<input>`标签来创建音量控制条,并使用`onchange`属性来调用`changeVolume()`函数。我们还添加了几个按钮,每个按钮都有一个相应的JavaScript函数来控制视频的播放,暂停,停止,快进和慢放。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值