play - stop video with javascript
Javascript para detener la reproducción de video HTML5 en la ventana modal cerrar (9)
Tengo un elemento de video html5 en una ventana modal. Cuando cierro la ventana el video continúa reproduciéndose. Soy un novato total para JS. ¿Existe una manera fácil de vincular una función de parada de reproducción de video al botón de cerrar ventana? A continuación se muestra mi página html:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Modal Test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
<style type="text/css">
div#simpleModal
{
position:absolute;
top: 40px;
width: 320px;
left: 170px;
border: solid 1px #bbb;
padding: 20px;
background: #fff;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
opacity: 0.0;
-webkit-transition: opacity 0.0s ease-out; z-index: 0;
}
div#simpleModal.show
{
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
</style>
</head>
<body>
<a href="" id="showSimpleModal">Show Modal</a>
<div id="simpleModal" class="modal">
<video width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
<a href="" id="closeSimple">Close</a>
</div>
</body>
</html>
Cualquier entrada muy apreciada.
Gracias.
Busqué en todo el Internet una respuesta para esta pregunta. Ninguno funcionó para mí, excepto este código. Garantizado Funciona perfectamente.
$(''body'').on(''hidden.bs.modal'', ''.modal'', function () {
$(''video'').trigger(''pause'');
});
Cuando cierras el video solo necesitas pausarlo.
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer").pause();
return false;
});
<video id="videoContainer" width="320" height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
También, para referencia, aquí está la documentación de Opera para los controles de video de scripting .
Estoy usando el siguiente truco para detener el video HTML5. pause () el video en modo modal close y establece currentTime = 0;
<script>
var video = document.getElementById("myVideoPlayer");
function stopVideo(){
video.pause();
video.currentTime = 0;
}
</script>
Ahora puedes usar el método stopVideo () para detener el video HTML5. Me gusta,
$("#stop").on(''click'', function(){
stopVideo();
});
La respuesta correcta es: $("#videoContainer")[0].pause();
Ninguno de estos funcionó para mí con 4.1 video.js CDN. Este código mata la reproducción del video en un modo modal cuando se hace clic en ( .closemodal ). Tuve 3 videos. Alguien más puede refactorizar.
var myPlayer = videojs("my_video_1");
var myPlayer2 = videojs("my_video_2");
var myPlayer3 = videojs("my_video_3");
$(".closemodal").click(function(){
myPlayer.pause();
myPlayer2.pause();
myPlayer3.pause();
});
});
según sus documentos api.
No estoy seguro de si la solución de ZohoGorganzola es correcta; sin embargo, es posible que desee intentar obtener el elemento directamente en lugar de intentar invocar un método en la colección jQuery, así que en lugar de
$("#videoContainer").pause();
tratar
$("#videoContainer")[0].pause();
Para cualquier persona que tenga dificultades con este problema con videos incrustados utilizando la etiqueta <object> , la función que desea es el elemento Quicktime de Quicktime element.Stop(); Por ejemplo, para detener cualquiera y todas las películas que se reproducen, use:
var videos = $("object");
for (var i=0; i < videos.length; i++)
{
if (videos[i].Stop) { videos[i].Stop(); }
}
Tenga en cuenta la "S" mayúscula no estándar en Stop ();
Prueba esto:
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
$("#videoContainer")[0].play();
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
});
Pruebalo:
function stop(){
var video = document.getElementById("video");
video.load();
}