javascript - Play video, then redirect to a new page - Stack Overflow

admin管理员组

文章数量:1323707

I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.

I've followed the instruction from this post: Redirect html5 video after play

But this doesn't seem to work for me and I can't figure out what I should do differently.

Here's the code currently on my page:

<script src="text/javascript">
function playVideo(){
    var video = document.getElementById('addiction-video');
    video.play();
    video.addEventListener('ended',function(){
    location.href = '/';
    });
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src=".mp4" type="video/mp4" />
</video>

Can anyone tell why it's not redirecting after the video has finished playing?

I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.

Thank you!

I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.

I've followed the instruction from this post: Redirect html5 video after play

But this doesn't seem to work for me and I can't figure out what I should do differently.

Here's the code currently on my page:

<script src="text/javascript">
function playVideo(){
    var video = document.getElementById('addiction-video');
    video.play();
    video.addEventListener('ended',function(){
    location.href = 'http://mywordpresssite./addiction-a-call-for-connection-acim/';
    });
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite./wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>

Can anyone tell why it's not redirecting after the video has finished playing?

I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.

Thank you!

• javascript
• wordpress
• html
• video

Share Improve this question Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Oct 12, 2016 at 18:51 Jutta DuncanJutta Duncan 10122 silver badges1212 bronze badges 7

• Where do you call the playVideo() function? – Avag Sargsyan Commented Oct 12, 2016 at 18:58
• Good question! Where should I be calling it? I'm not super familiar with JavaScript. – Jutta Duncan Commented Oct 12, 2016 at 20:41
• Well, when the page is loaded I suppose, something like this: $( window ).load(function() { playVideo(); }) – Avag Sargsyan Commented Oct 12, 2016 at 22:58
• Does your video play by itself at all? – Avag Sargsyan Commented Oct 12, 2016 at 23:01
• Does the addEventListener work at all? So if you put a console.log there, does it show up in your console? – muka.gergely Commented Oct 13, 2016 at 6:47

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.

Secondly you don't need the playVideo() function. Rewrite your code accordingly:

<script type="text/javascript">

    var video = document.getElementById('addiction-video');

    video.addEventListener('ended',function(){
        location.href = 'http://mywordpresssite./addiction-a-call-for-connection-acim/';
    });

</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
    <source src="http://mywordpresssite./wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>

You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.

Thirdly keep your browser console open while writing a js code.

Good Luck!

本文标签： javascriptPlay videothen redirect to a new pageStack Overflow