0

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

我现在只有

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

1 回答 1

0

这是一个例子：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-24T17:33:34.760 回答