根据纯JavaScript的父div调整子视频元素的大小

Question

我可以成功拖放div及其包含的video元素。 但是，在调整div大小时，视频元素不会调整大小。

CSS：

.drsElement {
 position: absolute;
 border:8px solid #a00000;
}

.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}

标记：

<div id="myDiv" class="drsElement drsMoveHandle"
     style="left: 400px; top: 280px; width: 50px; height: 100px;
     background: #348534; text-align: center">
    <video id="localVideoPlayer" autoplay muted  ></video>
</div>

该如何解决呢？ 我正在使用这个例子。

Answer 1

如果您要调整div使用的大小

width: auto;
height: auto;

要么

如果您尝试根据div的使用来调整视频大小

video{
    width: 100%; 
    height: 100%; 
}

Answer 2

好吧，在尝试了无数种方法之后，我发现如果视频元素已经开始播放媒体，则没有任何方法可以调整视频元素的大小。 尝试设置宽度或高度时会引发“未捕获的SyntaxError：意外的令牌非法”错误。 因此，我决定使用canvas并将video元素设置为canvas上下文的drawImage方法的源可达到我的目的。 现在，我的标记如下：

<div id="myDiv" class="drsElement drsMoveHandle"
     style="left: 20px; top: 20px; 
     background: #348534; text-align: center">
    <canvas id="localVideoCanvas" ></canvas>
</div>

和CSS：

.drsElement {
 position: absolute;
 border:8px solid #a00000;
}

.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}

#localVideoCanvas {
    width: 100%;
    height: 100%;
}