HTML5는 : 이동하는 방법/I는 HTML5와 자바 스크립트에 비교적 새로운 오전 버튼

와 비디오의 위치를 변경합니다. 나는 간단한 웹 사이트를 만들었 기 때문에 제한된 지식에 대해 사전에 사과드립니다. 친구는 도움이 필요하며 그것에 도움을 청합니다.HTML5는 : 이동하는 방법/I는 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; 
}

추가 자바 스크립트 에 :

여기
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를 사용할 수 있습니다.

먼저 온 클릭 이벤트와 두 개의 버튼을 정의한다.

<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); 
}

출처

2017-09-16 20:27:49 helfsoft

HTML5는 : 이동하는 방법/I는 HTML5와 자바 스크립트에 비교적 새로운 오전 버튼

답변

관련 문제