<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="0">
<title>video播放视频以及相关事件</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<style type="text/css">
.playVideo{
margin: 100px;
}
</style>
</head>
<body>
<div class="playVideo">
<video class="news_video" src="fayuan.mp4" controls=""></video>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
playVideo();
/*视频播放状态*/
$('.news_video').bind('play', function () {
alert("正在播放视频");
});
/*视频结束或错误*/
$('.news_video').bind('error ended', function(){
alert("播放视频结束");
})
/*视频暂停*/
$('.news_video').bind('pause', function () {
alert("暂停");
});
video.controls=true;//显示进度条
}) //播放视频 function playVideo(){ var video = $(".news_video"); if(video.length>0){ video[0].play(); } } </script> </body> </html>
