當用Jquery拖入某個區域時播放視頻

我試圖找到一種方法將視頻拖入使用JQUery的可放置區域。當這個視頻被放入該區域時，它將會擴展並開始播放。我也希望能夠將視頻拖回去，讓它停下來，這樣用戶就可以拖拽另一個視頻了......關於如何完成這些任何想法？當用Jquery拖入某個區域時播放視頻

所有我現在已經是

$function() 
{ 
    $("#drag").draggable(); 
    $("#drop").droppable(
    { 
     drop: function (event, ui) 
     { 
      $(this) 
       .addClass ("ui-state-highlight") 
       .find("p") 
       .html("dropped!"); 
     } 
    }); 
});

來源

2013-02-24 user2104891

你應該只拖動您的視頻圖像（縮略圖）與視頻相關聯的屬性的URL。當圖像被丟棄時，抓住url（使用屬性）並創建一個HTML 5視頻容器，然後以編程方式播放 – sdespont 2013-02-24 16:54:44

這是一個好主意，我對這個東西很新，所以我會試試看...如何我會去抓取網址嗎？有可能在那個盒子裏玩嗎？以及如何讓用戶移動其他視頻進行播放？ – user2104891 2013-02-24 16:56:00

這裏是個例：http://jsfiddle.net/UQTY2/26/

<!DOCTYPE html> 
<html> 
<body>  
    <img class="drag" width="200px" videourl="http://www.w3schools.com/html/mov_bbb.mp4" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header1.jpg" /> 

    <video id="video" class="drop" width="320" height="240" controls style="background-color:grey"> 
     Your browser does not support the video tag. 
    </video> 
</body> 
</html> 

$(document).ready(function(){ 

    $(".drag").draggable(); 
    $(".drop").droppable(
    { 
     drop: function (event, ui) 
     { 
      var url = $(ui.draggable).hide().attr('videourl'); 
      var $video = $('#video') 
      $video.empty().append('<source src="'+url+'" type="video/mp4" />'); 
      $video.get(0).play(); 
     } 
    }); 
});

來源

2013-02-24 17:33:34 sdespont

當用Jquery拖入某個區域時播放視頻

回答

相關問題