admin管理员组

文章数量:1323353

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!

Share Improve this question edited May 23, 2017 at 11:45 CommunityBot 11 silver badge asked Oct 12, 2016 at 18:51 Jutta DuncanJutta Duncan 1012 silver badges12 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

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