video播放视频以及相关事件

最新推荐文章于 2024-08-13 08:51:52 发布

十年树木_2015

最新推荐文章于 2024-08-13 08:51:52 发布

阅读量1w

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_30337695/article/details/52678112

版权

javaScript 专栏收录该内容

30 篇文章 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>

播放截图：