6

次の画像に示すように、HTML ページに 3 つのビデオを含めるというプロジェクトの要件があります。

ここに画像の説明を入力

この各ビデオの右下隅をクリックすると、ビデオのサイズを変更でき、それに応じて他のビデオのサイズも変更されます。ここで直面している問題は、各ビデオの右下隅でマウスをクリックしてドラッグするだけでビデオのサイズを変更する方法です。タグresizeのプロパティを使用してみましvideoたが、コントローラーの幅と高さのサイズが変更されますビデオ。サードパーティの API や JavaScript を使用する必要がありますか?

これについていくつかの RND を実行することで、私は について知るようになりましたcanvas。しかし、ビデオと一緒に使用する方法がわかりません。

誰か私をここに案内してもらえますか? どんな種類の助けも大歓迎です。

コード :

<!DOCTYPE html>
<html>
<head>
 <style>
   video{
     resize:both;
   }
 </style>
</head>
<body>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">      
</video>

</body>
</html>
4

2 に答える 2

7

正直なところ、非常に多くのサイズ変更ハンドルがあると少し混乱します。また、物事をかなり複雑にします。

これは私がこれまでに思いついたものです。これにより、完全な実装の良い感覚が得られるはずです。

var $cont = $('#container'),
    contWidth = $cont.width(),
    contHeight = $cont.height(),
    $one = $('#one'),
    $two = $('#two'),
    $ltop = $one.find('.ltop'),
    $lbot = $one.find('.lbot');

$ltop.resizable({
    handles: 'se',
    minWidth: '100',
    maxWidth: '400',
    resize: function() {
        var width = $(this).width(),
            height = $(this).height(),
            remSpaceH = contWidth - width,
            remSpaceV = contHeight - height;

        $one.width(width);
        $two.width(remSpaceH - ($two.outerWidth() - $two.width()));

        $lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height()));
    }
});

デモ: http://jsfiddle.net/dfsq/KuAsz/

于 2013-03-29T08:39:00.993 に答える
2

これははるかに優れています：http://jsfiddle.net/ScDmp/9/

<div id="myContainer">
    <video width="320" height="240" controls id="myVideo">
        <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
    </video>
    <div>
        <input type="range" min="100" max="500" step="50" id="mySlider" value="0" onchange="document.getElementById('myVideo').width = this.value;"/>

次に、キャンバスの幅を毎秒チェックし、それに応じてビデオのサイズを変更するタイマーで入力スライダーを変更できます。

jquery ui resizing で次のようなことを試すことができます。

function ready(){
    $("#myContainer").resizable();
    var interval = setInterval(checkWidth, 1000);

    function checkWidth()
    {
         $("#myVideo").width($("#myContainer").width());
    }
    setTimeout($("#myContainer").width("100px"),1000);

    setTimeout($("#myContainer").width("200px"),5000);

    setTimeout($("#myContainer").width("300px"),10000);
}
于 2013-03-29T07:24:30.817 に答える