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