Question

我是HTML5和Javascript的新手。我只创建了简单的网站，所以我提前为我的有限知识道歉。一位朋友需要一些帮助，我提议对此采取行动。

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

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

参考图片有助于说明这个想法如下（我只能发布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>

Answer 1

最简单的方法是在其父级内部垂直移动视频。

加入 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/

Answer 2

您可以使用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处理实际定位。函数move需要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 );
}

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

2 个答案: