JQuery 利用Dialog,內鑲影音並且自動播放

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>

 

 

 

參考或是複製語法時,別忘了留個言喔 ^ ^ ~