javascript判断视频音频是否播放结束的代码

HTML DOM ended 事件在 HTML video(视频)或 audio(音频)播放完成后触发,因此通过监听 ended 事件就可以判断视频或音频是否已经播放完在,然后执行其它操作。

以下代码支持IE9+浏览器。如果是音频则把 HTML 代码改成 audio 标签的内容即可。

HTML代码:

<video  
	id="video1" 
	src="upload/video.mp4" 
	poster="upload/poster.jpg" 
	webkit-playsinline="true" 
	playsinline="true" 
	x5-video-player-type="h5" 
	x5-video-player-fullscreen="true"
	x-webkit-airplay="allow" 
	x5-video-orientation="portraint" 
	loop
>				
</video>

JS代码:

var _video = document.getElementById('video1');
_video.loop = false; //禁止循环播放,如果视频video没有设置loop参数,可以不用写
_video.addEventListener('ended', function(){
	alert('视频已经播放完成');
},false);

扩展:

addEventListener()方法的第二个参数作用是指定事件是否在捕获或冒泡阶段执行,true 表示事件句柄在捕获阶段执行,false 表示事件句柄在冒泡阶段执行,默认值是 false