Question

我可以成功拖放div及其包含的视频元素。但是在调整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>

如何解决问题？我正在使用this示例。

Answer 1

如果你试图重新调整div的大小

width: auto;
height: auto;

OR

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

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

Answer 2

好吧，在尝试了很多方法后，我发现没有方法可以调整视频元素的大小，如果它已经开始播放媒体。它抛出＆＃34; Uncaught SyntaxError：意外的令牌ILLEGAL＆＃34;尝试设置宽度或高度时出错。所以，我决定使用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%;
}

在普通javascript中根据父div调整子视频元素的大小

2 个答案: