Как изменить размер видео в HTML5 динамически?

У нас есть требование в проекте, которое имеет 3 видео на странице html, как показано на следующем изображении.Как изменить размер видео в HTML5 динамически?

enter image description here

Теперь, нажав в правом нижнем правом углу на каждом из этого видео пользователь может изменить размер видео и, соответственно, размер других видео изменится. Проблема, с которой я столкнулся, заключается в том, как изменить размер видео, просто нажав и перетащив щелчок мыши в нижнем правом углу каждого видео, я попытался использовать свойство resize тега video, но он изменяет размеры и ширину контроллеров видео. Должен ли я использовать какой-либо сторонний API или JavaScript, или я делаю какую-либо глупую ошибку?

, сделав некоторое RND на этом, я узнал о canvas. но не понимает, как использовать его вместе с видео.

Может ли кто-нибудь, пожалуйста, направить меня сюда? Любая помощь была бы весьма признательна.

КОД:

<!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, у него много чего не так –

Это довольно легко, если вы используете какую-либо lib, как jQueryUI, изменяемую по размеру. – 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 resizable .__ – KunalK

@KunalK проверить мое редактирование, я сделал это, чтобы показать вам, что вы можете легко изменить ширину видео, скоро предоставит более подробный пример. –

Как изменить размер видео в HTML5 динамически?

ответ

Смежные вопросы