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!
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
1 Answer
Reset to default 7Firstly 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
版权声明:本文标题:javascript - Play video, then redirect to a new page - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742130201a2422124.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论