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>
參考或是複製語法時,別忘了留個言喔 ^ ^ ~