Question

我尝试使用基本的javascript脚本缩小视频（），但由于某种原因，它并没有改变。我甚至尝试使用chrome dev工具将其缩小，但它只是缩小尺寸。

这是基本脚本 -

window.onload = function() {
            var videos = document.getElementsByTagName('video');
            for(var i=0;i<videos.length;i++) {
                videos.item(i).addEventListener("loadedmetadata", function(e) {
                    //Tried using target and videoWidth
                    //Both didn't work
                    e.srcElement.clientWidth = "480"; 
                    console.log(e);
                });
            }
        }

Answer 1

查看以下代码：

<video width="720" height="405" controls preload="auto">
    <source src="myvideo.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
        var videos = document.getElementsByTagName('video');
        for(var i=0;i<videos.length;i++) {
            console.log(videos[i]);
            videos[i].addEventListener("loadedmetadata", function(){
                console.log('loadedmetadata');
                this.setAttribute("width","480"); 
                this.setAttribute("height","270"); 
            });
        }
</script>

要修复代码，有两件事需要解决：

this.setAttribute用于解决视频元素的宽度和高度
loadedmetadata事件：您可能无法将loadedmetadata事件的listner包装到onload侦听器函数中。原因是在onload事件触发时大多数时候loadedmetadata事件已经被触发。在将视频标记添加到DOM之后，您需要立即为loadedmetadata设置侦听器，否则您可能会错过它。看看这个Opera article，了解更多关于HTML5视频事件发生的信息（它可能会变得有点棘手）。查看here以获取HTML5媒体元素事件的完整列表

在loadedmetadata </video>之后缩小<video>大小

1 个答案: