video播放视频以及相关事件

最新推荐文章于 2025-09-21 09:20:02 发布

转载最新推荐文章于 2025-09-21 09:20:02 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML5的video标签实现视频播放的基础案例，并通过jQuery为视频播放添加了事件监听器，如播放、结束及暂停等事件，展示了如何在网页中集成视频播放功能并监控其状态。

<!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>

转载于:https://www.cnblogs.com/moxiaowohuwei/p/7736014.html