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 に答える