Question

我正在尝试使用JQUery找到一种将视频拖动到可放置区域的方法。当该视频被放入该区域时，它将扩展并开始播放。我也希望能够将视频拖回来并让它停止，这允许用户拖动另一个视频......关于如何做到的任何想法？

我现在拥有的只是

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

Answer 1

以下是一个示例：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();
        }
    });
});

使用Jquery拖动到某个区域时播放视频

1 个答案: