怎么调节html的声音,H5新属性audio音频和video视频的控制详解(推荐)

本文讲诉了H5新属性audio音频和video视频的控制,具体如下:

1.音频(audio)

2.视频(video)

静音

打开声音

播放

停止播放

全屏

下面是对于视频文件的控制;

javascript引出。

var myVideo=document.getElementById("video");

var btn=document.getElementById("button");

btn[0].click=function(){

myVideo.muted=true;(是否静音:是)

}

btn[1].click=function(){

myVideo.muted=true;(是否静音:否)

}

btn[2].click=function(){

myVideo.play();(播放)

}

btn[3].click=function(){

myVideo.pause();(停止播放)

}

btn[4].click=function(){

myVideo.webkitrequestFullscreen();(全屏显示)

}

3.如何设置进度条和视频的播放时长

同步进行。

如图所示:

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值