根据纯文本javascript中的父div调整子视频元素的大小
根据纯文本javascript中的父div调整子视频元素的大小
提问于 2014-12-23 06:49:11
我可以成功地拖放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>如何解决这个问题？我正在使用这示例。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-23 12:04:38
嗯，在尝试了无数种方法之后，我发现如果视频元素已经开始播放媒体，没有任何方法可以调整视频元素的大小。它在试图设置宽度或高度时抛出"Uncaught :意外令牌非法“错误。因此，我决定使用画布，并将视频元素设置为画布上下文的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%;
}Stack Overflow用户
发布于 2014-12-23 07:50:06
如果你想重新调整你的div的大小
width: auto;
height: auto;或
如果你想按照div的方式调整你的视频大小
video{
width: 100%;
height: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27615417
复制相关文章
相似问题
腾讯云开发者
