HTML5：如何使用按钮移动/更改视频的位置

我对HTML5和Javascript相当陌生。我只创建了简单的网站，所以我提前为我有限的知识道歉。一位朋友需要一些帮助，我提出要采取一些措施。HTML5：如何使用按钮移动/更改视频的位置

这个概念很简单： - 有一个按钮，可以调整视频的位置向上或向下。

- 视频应该包含在窗口内。与视频相比，该窗口的分辨率会较小，以便隐藏视频的其余部分并仅显示窗口内的部分。

参考图像，以帮助说明这个思想低于（我只能发布2）： Ref-Button1 Ref-Button2

这可能吗？

通过研究，我的印象是可移动的div或可能的画布可能是正确的方法。

到目前为止，我所有的尝试都失败了。我认为这不会有多大帮助，但是如果需要，我还会提供一个脚本示例。

任何洞察力，非常感谢。

<style> 
    body { 
    background-color: Grey 
    color: #CCCCCC; 
    } 

    #videoWindow { 
    width: 720px; 
    height: 350px; 
    margin-left: 400px; 
    margin-right: 400px; 
    border: 7px solid #0F0F0F; 
    border-radius: 5px; 
    } 

    #videoControls { 
    margin-left: 400px; 
    margin-right: 400px; 
    position: fixed; 
    background-color: #FFFFFF; 
    width: 400px; 
    height: 250px; 
    } 

    #videoManip { 
    width: 720px; 
    height: 350px; 
     } 

</style> 


<body> 
<div> 
    <!--Video Window (Static)--> 
    <div id="videoWindow" class="videoWindow"> 

    <!--Video Re-Positioner--> 
    <div id="videoManip" class="videoManip"> 
     <!--Video--> 
     <video id="video" width="720" height="1050"> 
     <source src="Videos/VideoPlayerTest.mp4" type="video/mp4"> 
</div> 

     <!--VideoPositionControls--> 
     <div class=""><!--SetClass--> 

     <!--Button1--> 
     <input type="button" id="button1" value="Button1"> 

     <!--Button2--> 
     <input type="button" id="button2" value="Button2"> 

     <!--Button3--> 
     <input type="button" id="button3" value="Button3"> 
    </div> 
    </div> 
</body> 


<script> 

    //Video 
    var video = document.getElementById("video"); 

    //VideoPositionControls 
    var Btn1 = document.getElementById("button1"); 
    var Btn2 = document.getElementById("button2"); 
    var Btn3 = document.getElementById("button3"); 

    //Event Listener: Video Position Controls 
    //Update Video Position for 'Cam1' 
    Btn1.addEventListener("click", function() { 
    video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,0) 

    //Update Video Position for 'Cam2' 
    Btn2.addEventListener("click", function() { 
    video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,350) 

    //Update Video Position for 'Cam3' 
    Btn3.addEventListener("click", function() { 
    video.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC(0,-350) 

</script>

来源

2017-09-16 Chrasey

最简单的方法就是将视频垂直移动到其父项中。

加成CSS：

#videoManip { 
    overflow: hidden; 
} 
#video { 
    position: relative; 
}

加成的JavaScript：

Btn1.addEventListener("click", function() { 
    video.style.top = 0; 
}); 
Btn2.addEventListener("click", function() { 
    video.style.top = '-350px'; 
}); 
Btn3.addEventListener("click", function() { 
    video.style.top = '-700px'; 
});

下面是微小的jsfiddle说明的是：https://jsfiddle.net/iStyx/ocgx6pdL/

来源

2017-09-16 20:26:51 Styx

对不起，本网站新手，已经习惯了回复。我已经给出了您的建议，并且无法正常工作。有一个反应发生，所以这是一个好兆头，但视频只是短暂闪烁反应，然后继续播放。它似乎正在试图重新定位，但不会坚持这一立场。有任何想法吗？（我会在下面提供我的脚本） – Chrasey

你可以使用JQuery来实现这一目标。

首先用onclick事件定义两个按钮。

<div id="videoControls"> 
    <button id="move-up" onclick="move(0,1)">Up</button> 
    <button id="move-down" onclick="move(0,-1)">Down</button> 
</div>

以下代码处理jQuery的实际定位。函数移动需要2个参数x和y来表示视频沿轴移动的像素数量。在这个例子中，它使用边距来定位。你应该检查你的用例是否合适。

const STEP = 10; 
const VIDEO_ID="video"; 
function move(x,y){ 
    var valx = "+="+(STEP*x)+"px"; 
    var valy = "+="+(STEP*y)+"px"; 
    $(VIDEO_ID).css('margin-top', valy); 
    $(VIDEO_ID).css('margin-left', valx); 
}

来源

2017-09-16 20:27:49 helfsoft

HTML5：如何使用按钮移动/更改视频的位置

回答

相关问题