可拖动的作品可调整大小不是

首先，我是编程中的新手。我读过几乎所有类似的主题，但我无法弄清楚我的情况有什么不对。我运行下面的代码使用本地主机服务器（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

可拖动的作品可调整大小不是

回答

相关问题