如何动态调整HTML5视频的大小？

我们在项目中要求在一个html页面中有3个视频，如下图所示。如何动态调整HTML5视频的大小？

enter image description here

现在通过点击每个视频用户的右下角可以调整视频和相应的其他影片的大小会发生变化。我在这里面临的问题是如何通过在每个视频的右下角点击并拖动鼠标来调整视频的大小，我试过使用标记的resize属性，但它调整了控制器的宽度和高度的视频。我是否必须使用任何第三方API或JavaScript，或者我是否犯了一个愚蠢的错误？

通过对此做一些RND我来了解一下canvas。但没有任何想法如何与视频一起使用它。

任何人都可以在这里指导我吗？任何形式的帮助将不胜感激。

CODE：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    video{ 
    resize:both; 
    } 
</style> 
</head> 
<body> 
<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg">  
</video> 

</body> 
</html>

来源

2013-03-29 KunalK

这是我从w3school使用的代码。但它只调整控制器而不是整个视频。 – KunalK

不使用w3schools，它有很多错误 –

如果你使用像jQueryUI这样的一些lib可调整大小，这很容易。 – dfsq

说实话这是一个有点混乱，你有这么多的调整大小手柄。这也使事情变得非常复杂。

这是我想出了这么远，这应该给你完整的实现感好：

var $cont = $('#container'), 
    contWidth = $cont.width(), 
    contHeight = $cont.height(), 
    $one = $('#one'), 
    $two = $('#two'), 
    $ltop = $one.find('.ltop'), 
    $lbot = $one.find('.lbot'); 

$ltop.resizable({ 
    handles: 'se', 
    minWidth: '100', 
    maxWidth: '400', 
    resize: function() { 
     var width = $(this).width(), 
      height = $(this).height(), 
      remSpaceH = contWidth - width, 
      remSpaceV = contHeight - height; 

     $one.width(width); 
     $two.width(remSpaceH - ($two.outerWidth() - $two.width())); 

     $lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height())); 
    } 
});

演示：http://jsfiddle.net/dfsq/KuAsz/

来源

2013-03-29 08:39:00 dfsq

+1帮帮我。 – KunalK

这是更好的方式：http://jsfiddle.net/ScDmp/9/

<div id="myContainer"> 
    <video width="320" height="240" controls id="myVideo"> 
     <source src="movie.mp4" type="video/mp4"> 
      <source src="movie.ogg" type="video/ogg"> 
    </video> 
    <div> 
     <input type="range" min="100" max="500" step="50" id="mySlider" value="0" onchange="document.getElementById('myVideo').width = this.value;"/>

然后你可以改变与定时器的输入滑块，将检查画布每秒和重新的宽度相应地调整视频大小。

你可以尝试这样的事情用jQuery UI的调整大小：

function ready(){ 
    $("#myContainer").resizable(); 
    var interval = setInterval(checkWidth, 1000); 

    function checkWidth() 
    { 
     $("#myVideo").width($("#myContainer").width()); 
    } 
    setTimeout($("#myContainer").width("100px"),1000); 

    setTimeout($("#myContainer").width("200px"),5000); 

    setTimeout($("#myContainer").width("300px"),10000); 
}

来源

2013-03-29 07:24:30

@kunalk试试这个 –

谢谢，但我不想使用任何额外的控件，如范围，我想通过拖动视频的右下角来调整它的大小。我想我已经得到了解决方案，通过使用__jQueryUI可调整大小.__ – KunalK

@KunalK检查我的编辑，我这样做是为了告诉你，你可以改变视频宽度容易，将提供更详细的例子 –

如何动态调整HTML5视频的大小？

回答

相关问题