Javascript to stop HTML5 video playback on modal w

2019-01-13 20:16发布

站内问答 / JavaScript
1662 9 6

I've got a html5 video element on a modal window. When I close the window the video continues to play. I'm a total newbie to JS. Is there an easy way to tie a video playback stop function to the window close button? Below is my html page:

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

Any input greatly appreciated.

Thanks.

9条回答
三岁会撩人
2楼-- · 2019-01-13 20:22

The right answer is : $("#videoContainer")[0].pause();

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-01-13 20:35

I'm using the following trick to stop HTML5 video. pause() the video on modal close and set currentTime = 0;

<script>
     var video = document.getElementById("myVideoPlayer");
     function stopVideo(){
          video.pause();
          video.currentTime = 0;
     }
</script>

Now you can use stopVideo() method to stop HTML5 video. Like,

$("#stop").on('click', function(){
    stopVideo();
});
查看更多
0人赞 添加讨论(0) 举报
欢心
4楼-- · 2019-01-13 20:35

Have a try:

function stop(){
    var video = document.getElementById("video");
    video.load();
}

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
5楼-- · 2019-01-13 20:37

Try this:

$(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;                   
    });
});
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2019-01-13 20:39

I'm not sure whether ZohoGorganzola's solution is correct; however, you may want to try getting at the element directly rather than trying to invoke a method on the jQuery collection, so instead of 

$("#videoContainer").pause();

try 

$("#videoContainer")[0].pause();
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
7楼-- · 2019-01-13 20:39

For anyone struggling with this issue with videos embedded using the <object> tag, the function you want is Quicktime's element.Stop(); For example, to stop any and all playing movies, use:

var videos = $("object");

for (var i=0; i < videos.length; i++)
{
    if (videos[i].Stop) { videos[i].Stop(); }
}

Note the non-standard capital "S" on Stop();

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)