缩小比例<video>加载元数据后的大小

我试图用一个基本的javascript脚本缩小视频（），但由于某种原因它没有改变。我甚至尝试过使用chrome开发工具来缩小它，但它只是缩小了。缩小比例<video>加载元数据后的大小

这里是基本的脚本 -

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); 
       }); 
      } 
     }

来源

2014-06-12 Yehonatan

尝试'e.srcElement.width = 480'。 –

'clientWidth'是只读的。你可以像@IgorGilyazov所说的做，或者你可以使用CSS。 – brianchirls

看一看下面的代码：

<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>

有两件事情来修复您的代码工作：

这.setAttribute处理视频元素的宽度和高度
loadedmetadata事件：您可能不会将loadedmetadata事件的列表程序包装到onload监听器函数中。原因在于onload事件触发时，大多数时间loadedmetadata事件已经触发。视频标签添加到DOM后，您需要立即为loadedmetadata设置监听器，否则您可能会错过它。看看这个Opera article了解更多关于HTML5视频事件触发的信息（它可能会有点棘手）。查看here以获取HTML5媒体元素事件的完整列表

来源

2014-06-13 11:24:28

缩小比例<video>加载元数据后的大小

回答

相关问题