HTML5: Comment déplacer/modifier la position d'une vidéo avec un bouton

Je suis assez nouveau pour HTML5 et Javascript. Je n'ai créé que des sites Web simples et je m'excuse d'avance pour mes connaissances limitées. Un ami a besoin d'aide et je lui ai proposé d'essayer.HTML5: Comment déplacer/modifier la position d'une vidéo avec un bouton

Le concept est assez simple: -Avoir un bouton qui permettra d'ajuster la position d'une vidéo vers le haut ou vers le bas.

-La vidéo doit être contenue dans une fenêtre. La fenêtre tiendra une plus petite résolution par rapport à la vidéo, afin de cacher le reste de la vidéo et de ne révéler que la partie dans la fenêtre.

images de référence pour illustrer l'idée sont ci-dessous (je ne peux pas poster 2): Ref-Button1 Ref-Button2

Est-ce possible? En faisant des recherches, j'ai l'impression qu'un div mobile ou peut-être une toile pourrait être la bonne approche.

Jusqu'ici, toutes mes tentatives échouent. Je ne pense pas que cela aidera beaucoup, mais un exemple de mon script est également fourni si nécessaire.

Toute idée est grandement appréciée.

<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>

Source

2017-09-16 Chrasey

Le moyen le plus simple de le faire est de déplacer la vidéo verticalement à l'intérieur de son parent.

Ajout à CSS:

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

Ajout à 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'; 
});

Voici petit jsFiddle qui montre que: https://jsfiddle.net/iStyx/ocgx6pdL/

Source

2017-09-16 20:26:51 Styx

Désolé, nouveau sur ce site, s'habituer à la réponse. J'ai donné un coup de feu à votre recommandation et j'ai du mal à le faire fonctionner correctement. Il y a une réaction qui se produit donc c'est bon signe, mais la vidéo réagit simplement avec un bref scintillement et continue à jouer. On dirait qu'il essaie de se repositionner, mais ne s'en tiendra pas à cette position. Des idées? (Je vais fournir mon script ci-dessous) – Chrasey

Vous pouvez utiliser JQuery pour y parvenir.

Définissez d'abord deux boutons avec un événement 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>

Le code suivant gère le positionnement réel avec jquery. La fonction move prend 2 paramètres x et y pour le nombre de pixels que la vidéo doit déplacer le long de l'axe. Dans cet exemple, il utilise une marge pour le positionnement. Vous devriez vérifier si c'est bon avec votre cas d'utilisation.

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

Source

2017-09-16 20:27:49 helfsoft

HTML5: Comment déplacer/modifier la position d'une vidéo avec un bouton

Répondre

Questions connexes