码迷,mamicode.com
首页 > 其他好文 > 详细

video播放视频以及相关事件

时间:2017-10-26 13:32:16      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:java   length   结束   log   alert   link   pre   code   htm   

<!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播放视频以及相关事件

标签:java   length   结束   log   alert   link   pre   code   htm   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!