JQuery 利用Dialog開啟時,自動播放影音
使用程式語言:Jquery,Html
首先,先準備一支影音檔,然後引用Jquery,
在head標籤內,加入下面script標籤內的程式碼
<script>
$(function(){
$("#dialog").dialog({
autoOpen:false,
open:function(event,ui){
$("video#video_player").get(0).play();
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
接著,在Html body標籤裡面,加入影音和一顆按鈕
<div id="dialog" title="Dialog影音">
<video id="video_player" controls="controls" width="100%" height="100%">
<source src="viedo.mp4" type="video/mp4">
<object data="viedo.mp4">
<embed src="viedo.mp4">
</object>
</video>
</div>
<button id="opener">播放影片</button>
點擊"播放影片"的按鈕時,Dialog就會彈出,然後自動播放影片了。
完整程式碼參考如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用Dialog,內鑲影音並且自動播放</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function(){
$("#dialog").dialog({
autoOpen:false,
open:function(event,ui){
$("video#video_player").get(0).play();
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Dialog影音">
<video id="video_player" controls="controls" width="100%" height="100%">
<source src="viedo.mp4" type="video/mp4">
<object data="viedo.mp4">
<embed src="viedo.mp4">
</object>
</video>
</div>
<button id="opener">播放影片</button>
</body>
</html>
參考或是複製語法時,別忘了留個言喔 ^ ^ ~