方式1：html5播放器设置音量的方式实例源代码

<!DOCTYPE html>  
<html>  
<body>  
 
<button onclick="getVolume()" type="button">音量是多少？</button> 
<button onclick="setHalfVolume()" type="button">把音量设置为 0.2</button> 
<button onclick="setFullVolume()" type="button">把音量设置为 1.0</button> 
<br /> 
<br /> 
<video id="video1" controls="controls"> 
  <source src="../example/html5/mov_bbb.mp4" type="video/mp4"> 
  <source src="../example/html5/mov_bbb.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video. 
</video> 
 
<script> 
myVid=document.getElementById("video1"); 
function getVolume() 
  {  
  alert(myVid.volume); 
  }  
function setHalfVolume() 
  {  
  myVid.volume=0.2; 
  }  
function setFullVolume() 
  {  
  myVid.volume=1.0; 
  }  
</script>  
 
</body>  
</html>

方式2：酷播云html5播放器代码实例

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
autoplay:'true',
width: '600',
height: '400',
vid: '138dcc9667db2b329ede4d0d49e9eea2_1',
});
//时间刷新
var interval=setInterval("render()",500);
function render(){
	var sec2=player.j2s_getCurrentTime();
	var sec3=player.j2s_getDuration();
	var sec4=player.j2s_realPlayVideoTime();
	document.getElementById("realPlayVideoTime").innerHTML="当前观看时间（不包含视频缓冲时间）是 <span style='color:#ff0000;'>"+sec4+"</span> 秒";
	document.getElementById("getCurrentTime").innerHTML="当前播放进度是 <span style='color:#ff0000;'>"+sec2+"</span> 秒";
	document.getElementById("duration").innerHTML="当前视频的时长是 <span style='color:#ff0000;'>"+sec3+"</span> 秒";
}
function play() {
	player.j2s_pauseVideo();
}
function getDuration() {
	console.log(player.j2s_getDuration());
	document.getElementById("totalTime").innerHTML = "输出当前播放时间："+player.j2s_getDuration();
}
function getCurrentTime() {
	console.log(player.j2s_getCurrentTime());
	document.getElementById("times").innerHTML = "输出当前播放时间："+player.j2s_getCurrentTime();
}
//设置音量
function setVolume(num) {
	player.j2s_setVolume(num);
	console.log("音量"+num)
}
//播放器事件
player.on('s2j_onPlayerInitOver',function(e) {
	console.log("播放器初始化完毕。")
});  
player.on('s2j_onPlayOver',function(e) {
	console.log("视频播放完毕。")
}); 
player.on('s2j_onVideoPause',function(e) {
	console.log("视频播放已暂停。")
}); 
player.on('s2j_onVideoPlay',function(e) {
	console.log("视频正在播放。")
}); 


</script>

html5播放器设置音量的方式实例源代码

我的热门文章推荐

猜你喜欢