draggable works resizable not

まず、私はプログラミングの初心者です。私はほとんどすべての似たような話題を読んだが、私の場合は何が間違っているのか分からない。私はlocalhostサーバー（XAMPP）を使用してコードを実行し、draggableオプションはうまく動作しますが、サイズ変更はできません。draggable works resizable not

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Learning WebRTC - Chapter 2: Get User Media</title> 

    <link rel="stylesheet" href="jquery-ui-1.12.0.custom/jquery-ui.min.css"> 
    <script src="jquery-ui-1.12.0.custom/external/jquery/jquery.js"></script> 
    <script src="jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>  

    <style type="text/css"> 
     .student {      
      width: 180px; 
      height: 180px; 
     } 
    </style> 
</head> 
<body> 

<video class="student" autoplay></video> 

<script src="main.js"></script> 

<script> 
    $(document).ready(function() { 
     $(".student").resizable().draggable(); 
    }); 
</script> 

</body> 
</html>

main.js

function hasUserMedia() { 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia 
    || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasUserMedia()) { 
    navigator.getUserMedia = navigator.getUserMedia || 
     navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
     navigator.msGetUserMedia; 
    navigator.getUserMedia({ video: true, audio: true }, function 
     (stream) { 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(stream); 
    }, function (err) {}); 
} else { 
    alert("Sorry, your browser does not support getUserMedia."); 
}

出典

2016-09-15 enippeas

ここでテストし、Draggableが動作しているようです：https://jsfiddle.net/Twisty/f0resov1/ – Twisty

私はdivでvideo要素をラップし、これにドラッグ可能とサイズ変更可能の適用助言します。

私はこれと同様の問題が見つかりました：ここMaking HTML5 video draggable without losing the controls

は私が助言するものです：https://jsfiddle.net/Twisty/f0resov1/

HTML

<div class="vid-wrap"> 
    <div class="handle"> 
    <span class="ui-icon ui-icon-grip-dotted-horizontal"></span> 
    </div> 
    <video class="student" autoplay></video> 
</div>

CSS

.vid-wrap { 
    width: 240px; 
    height: 200px; 
} 

.handle { 
    height: 20px; 
    width: 100%; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc; 
    border-radius: 6px 6px 0 0; 
} 

.student { 
    width: 240px; 
    height: 180px; 
    margin: 0; 
    padding: 0; 
}

をこれにより

function hasUserMedia() { 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasUserMedia()) { 
    navigator.getUserMedia = navigator.getUserMedia || 
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
    navigator.msGetUserMedia; 
    navigator.getUserMedia({ 
    video: true, 
    audio: true 
    }, function(stream) { 
    var video = document.querySelector('video'); 
    video.src = window.URL.createObjectURL(stream); 
    }, function(err) {}); 
} else { 
    alert("Sorry, your browser does not support getUserMedia."); 
} 

$(document).ready(function() { 
    $(".vid-wrap").resizable({ 
    aspectRatio: 4/3, 
    minWidth: 240, 
    maxWidth: 640, 
    alsoResize: ".student" 
    }).draggable({ 
    handle: ".handle" 
    }); 
});

、我々は、ラッパーのサイズを変更することができ、それはそれの内側にビデオのサイズを変更します。これを行う別の方法は、幅が&の高さの場合、ビデオCSSを100％に設定します。ラッパーのサイズが変わると、スタイリングは内側のボックスをそのボックスサイズの100％にします。

ドラッグ可能な場合は、video要素で発生する可能性があるイベントをクリックまたはドラッグしないように、特定のハンドルを設定します。これはコントロールのない画像キャプチャのように見えますが、私は先を見通しています。

出典

2016-09-15 16:35:46 Twisty

優れた答えTwisty。できます。ありがとう – enippeas

答えて

関連する問題