Question

首先，我是编程新手。我已经阅读了几乎所有类似的主题，但我无法弄清楚我的情况有什么问题。我使用localhost服务器（XAMPP）运行以下代码，draggable选项工作正常但不可调整大小。

<!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.");
}

Answer 1

我建议在video中包装div元素并将Draggable和Resizable应用于此。

我发现了类似的问题：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;
}

<强> 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.");
}

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

有了这个，我们可以调整包装器的大小，它会调整其内部的视频大小。另一种方法是将视频CSS设置为100％的宽度和宽度。高度。当包装器改变大小时，样式会强制内盒占该盒子大小的100％。

对于draggable，我们设置了一个特定句柄，以便我们可以避免点击或拖动video元素可能发生的事件。这看起来像是一种无控制风格的图像捕捉，但我试着展望未来。

可拖动的作品可以调整大小

1 个答案: