the solve of volume problem

最新推荐文章于 2022-05-17 11:52:25 发布

原创最新推荐文章于 2022-05-17 11:52:25 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML5的<input type=range>元素与<video>标签结合，实现音视频播放器的音量调节及进度条控制功能。通过JavaScript动态调整音量和进度，增强用户体验。

i finally solved this problem as follow :

this problem can be very well solved by using the <audio > label,

this is a test file.

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title> HTML5 input元素type=range </title>
</head>
<body>
<input id="range" type="range" min="1" max="100" value="5" onchange="change()" >
<span id="value">5</span>

<br>
<br>
<br>


 <video style="float:left;" id="video1" preload="metadata" src="test1.mp3" height="300" autoplay="autoplay" controls="controls">
                你的浏览器不支持html5视频
            </video>

<br>
<br>
<br><!-- 
            <button id="upVolume" onclick="getVolume()" >音量+</button>
            <button id="downVolume">音量-</button>
 -->




<script type='text/javascript'>

// var value = document.getElementById('range').value ;

// var myVid=document.getElementById("video1");
// function getVolume()
//   { 
  
//   myVid.volume=change().value;
//     alert(myVid.volume);
//   } 


    // var button=document.getElementById("upVolume");
    // // var button=document.getElementById("upVolume").contentWindow.document.getElementById("clickindoc");
    // button.onclick=function(){
        
    //     getvolume(); 

    //     // window.location.assign( "#gallery");

    //     // alert("you are being hacked!!!");   
    // }
    



function change() {
   var value = document.getElementById('range').value ;
   document.getElementById('value').innerHTML= value;
   var getvalue=value;

   
 // alert(getvalue);

    myVid=document.getElementById("video1");

    myVid.volume=getvalue/100;

 
}





// var $  = function(id){return document.getElementById(id);};
//             var _video = $("testVideo");

//加大声音,每次加大1/10
//                 upVolume : function(){
//                     _video.volume += 0.1;
//                 },
//                 //减小声音，每次减小1/10
//                 downVolume : function(){
//                     _video.volume -= 0.1;
//                 },

//  //绑定页面上各个按钮的事件
// 　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
//                     for(var i = 0 ;i < btns.length ; i++){
//                         var el = btns[i];
//                         el.onclick = self[el.id];
//                     }




</script>
</body>
</html>

can play the music and the volume can be change by that processbar.