首页 > 其他 > 详细

video播放视频以及相关事件

时间:2017-10-26 12:22:50      阅读:229      评论:0      收藏:0      [点我收藏+]
<!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("暂停");  
    });  
})  
  
//播放视频  
function playVideo(){  
    var video = $(".news_video");  
    if(video.length>0){  
        video[0].play();  
    }  
}  
</script>  
</body>  
</html> 

 

video播放视频以及相关事件

原文:http://www.cnblogs.com/moxiaowohuwei/p/7736014.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!