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：如何使用按鈕移動/更改視頻的位置

回答

相關問題