可拖動的作品可調整大小不是

首先，我是編程中的新手。我讀過幾乎所有類似的主題，但我無法弄清楚我的情況有什麼不對。我運行下面的代碼使用本地主機服務器（XAMPP）和可拖動選項工作正常，但不能調整大小。可拖動的作品可調整大小不是

<!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

我勸包裹video元素在div和應用的可拖動和可調整到這一點。

我發現這個類似的問題：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

可拖動的作品可調整大小不是

回答

相關問題