html的音频与视频

最新推荐文章于 2022-12-22 15:12:13 发布

仟北代~

最新推荐文章于 2022-12-22 15:12:13 发布

阅读量162

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_48386796/article/details/118928790

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<body>
	
<!--controls是音视频播放时的一个控制键-->
<!-- autoplay是页面加载完后自动播放视频，height和width是设置视频的大小窗口-->
<!--loop规定重复播放-->
<!--  muted规定静音播放-->
		
<!--poster是在视频播放之前，加载的一张海报，封面-->
<!--preload是视频加载后，（如果没有autoplay自动播放属性）
第一个值：auto（在没有点击播放视频时，加载数据
） 第二个none（什么也不加载）-->
	<video id="video">         
	      <source src="1039533759.mp4"> 
	</video>
	<button id="pause">暂停</button>
    <button id="play">播放</button>
	<button id="change">换个视频</button>
	<button id="length">个数</button>
	<button id="open">开启控件</button>
	<button id="close">关闭控件</button>
	<button id="url">url</button>
	<button id="setTime">设置到第10秒</button>
	<button id="getTime">得到当前的秒数</button>
	<button id="volum">音量</button>
	<button id="break">破环视频地址</button>
	<p id="demo"></p>

</body>

js事件

			v1.onclick=function(){
				v.pause()                //点击暂停
			}
			v2.onclick=function(){
				v.play()                //点击播放
			}


   		 v.onplay=function(){
   			 alert('s')               //onplay 当视频播放的时候，才会触发的函数
   		 }
   		 v.onpause=function(){
   			 alert('g')                //onpause 当视频暂停的时候，才会触发的函数
   		 }

重新加载

			change.onclick=function(){
				v.src="你的名字_bilibili.mp4";
				v.load()                   
            //load 重新加载视频 比如前边他修改了视频的地址
			}

可以使用js来控制是否要开启控件

v.controls=true

v.currentSrc //查看当前的视频、音频地址

alert(v.currentTime) //获取当前视频的时间总长

v.ended //当一个视频没有播放完的时候返回false 反之返回true

v.volume //音量

v.paused //是否暂停

v.loop //返回或设置视频是否要自动播放

			 v.onseeking=function(){
					console.log('d')
				 }

                // v.onseeking 函数 是在当用户拖动进度条的时候，触发的函数
			    // v.onseeked 函数   是用户拖动完后触发的函数


						v.onvolumechange=function(){
							alert('当音量发生改变的时候，触发该函数')
						}

						v.onratechange=function(){
							alert('播放速度改变了，触发的函数') 
  //在改变了播放速度的时候，才触发的函数
						}

当自己做视频的数字时间进度时(因为进度一直在变，所以一直在触发)

		v.ontimeupdate=function(){
			//alert('当目前的播放位置已经更改的时候触发的函数')
  //在播放的过程中会不停的触发该函数，因为播放位置一直都在变化
	document.getElementById('demo').innerHTML=Math.round(v.currentTime) 
  //做视频的已播放时间
						}

	v.oncanplay=function(){
		alert('可以播放视频了')   
            //当加载够了足够的帧之后，就可以执行函数了
            //在请求网络数据，在等待资源加载，当帧数加载够了，就可以触发
	}



		v.onloadeddata=function(){
			alert('当前帧数据已加载')
		}


		 v.onprogress=function(){
			alert('正在下载视频')
//只要当加载的时候，就会触发
		}


v.onloadstart=function(){
	alert('视频开始加载了') 
}


   			  v.onabort=function(){
   				  alert('sdf')
//当视频停止加载时，比如加载完成(那个灰色进度条已满)，亦或是视频出问题
//又或是离开当前视频都会触发
   			  }



   			  v.onsuspend=function(){
   				  alert('p')
//当视频加载完成后，触发的函数
   			  }




	v.onstalled=function(){
		alert('视频数据不可用')
	}  
	//  尝试获取视频数据时，但数据不可用时触发 
//比如我把一个网络端的视频修改了，
//所以就是属于数据不可用，这事就会触发函数

v.ondurationchange=function(){

alert('视频加载时长已经改变')

//举例子，比如当前正在播放a视频，当点击播放到b视频的时候，

//会触发一次 alert，因为地址变了，由a视频的长度变化到了 0 所以触发一次

//当加载了b视频后，又从 0 变化到了 b视频的长度，又触发一次

所以一共触发两次

}

v.onloadedmetadata =function(){

alert('视频已加载了数据')

}

v.oncanplaythrough=function(){

alert('在视频不停下来播放的情况下，持续播放时触发该函数')

//举例说明:

/**

比如网络比较好，全程没暂停播放完了，就触发一次该函数

但如果卡了一次，等待加载了一次，会多触发一次，也就是两次，因为从卡的位置开始又会计算，看有没有持续播放，也就是说，每个持续播放的时间段都会触发一次该函数

**/

}

v.onemptied=function(){

alert('列表已经为空')

//当播放列表为空时

}

// v.played 是已播放部分的，和buffered 一样都有三个属性 start end length

// v.preload 预加载有三个属性值可以 auto none 等就是要不要在未播放的时候加载视频数据

// v.readyState) 返回视频的准备状态返回的是 0 到 4的数字值，代表不同的含义

仟北代~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的音频与视频

<body>  <!--preload是视频加载后，（如果没有autoplay自动播放属性）第一个值：auto（在.
复制链接

扫一扫

专栏目录