I want to make a script auto click on video icon button on page loading, but auto click is not working.
Code:
<svg class="button" id="play-button">
<use xlink:href="#play-button-shape">
</svg>
Auto click script code:
<script type="text/javascript">
document.getElementById("#play-button-shape").click();
</script>
Try the .on("click") or .trigger("click") function, it does the same thing but I had pretty much the same case as you and it had unlocked me.
I'm not sure it works but it's worth trying.
Why would you need to "autoclick" on page load? Just use a <video> element with autoplay...
<video controls autoplay>
<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Use this script:
window.onload = function() {
document.getElementById("play-button").click();
}
Related
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.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/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!
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.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/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!
I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]
Here how i am changing video
<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
var video_player = document.getElementById("videotag");
video_player.src = "media/draw1.mp4";
}
</script>
</html>
You can use preload auto for preventing the loading delay
<video width="1000" id="videotag" autoplay preload="auto" controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
I need to play sound in background that will repeat all the time - background music. I have added <audio> tag in my page html and added event
$("#audio-player").on('ended', function() {
//play again
}
in pageinit event of the page. And this works, but the music should continue even when I navigate to some other page, and I am not sure how to make this. I would appreciate any help. Thanks
You could use AJAX to load the new page. Use jQuery's load() to only load the #content part of the new page into the #content div of the current page.
HTML
<header>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
</header>
Page 2
<div id="content">
Page 1 content
</div>
</body>
</html>
JavaScript / jQuery
$('a').click(function(e){
e.preventDefault();
var target = $(this).attr('href');
$('#content').load(target + ' #content');
});
I'm using the video.js plugin and have a video intro that plays when my site loads. It works by autoplaying as soon as the page loads and it is in a div container that is z-indexed and overlayed over my home page.
I have jquery set to delay() and then fadeOut() the div out revealing my home page.
Good in theory only everyone has different connection speeds and the fadeOut() often happens too early or too late.
Is there a way to fadeOut() my div when the video has stopped?
Here is my jQuery:
$(document).ready(function() {
$("#overlay-video").delay(10000).fadeOut('slow');
});
EDIT: I have also just tried the following but this also does not work:
$(document).ready(function(){
$("#movie-id").bind('ended', function(){
alert("planet earth");
});
});
Thanks for the replies my HTML looks like this:
<div id="overlay-video">
<!-- Begin Video.js -->
<video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<!-- End Video.js -->
</div>
My jQuery is working because I can fadeOut the video element fine.
Couple things:
only a single doc.ready fxn is needed for all your scripts on your home page
use the on() method (with jQuery 1.7+)
Most importantly, fadeOut() needs to be inside the on('ended') function
As a general HTML5 <video> solution, this should work: http://jsfiddle.net/trpeters1/XzCMb/1/
$(document).ready(function(){
$("#movie-id").on('ended', function() {
console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
});
});
However, Video-js appears to require a call to the video.js object, so do this instead: http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video
_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
this.addEvent("ended", function(){ //adding "ended" event to video-js object
{ console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
}
});
});
I am autoplaying an html5 in a web app running in a UIWebView browser. I would like for the user to be able to touch the screen and be redirected to a new page. Since the video is autoplayed, I am able to omit the controls altogether (and that part is all working just fine). Is this redirection possible?
So far I have tried:
adding a link around the video tags
<video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" autoplay></video>
adding an onClick event to the video tag itself
<video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" onClick="document.location.href='http://www.example.com';" autoplay></video>
adding a div around the video with an onClick event (and then when that didn't work, increasing the div's z-index to make sure it was on top of the video)
<div onclick="location.href='http://www.example.com';" style="cursor:pointer; z-index:10;"><video type='video/mp4' id="myVideo" width="800" height="568" src="video1.ipad.mp4" autoplay></video></div>
any ideas would be much appreciated...
I happened to find something that worked today while working on another project! I thought I would post it here in case anyone else needs this functionality.
Basically, I created a link surrounding a transparent div that is the full size of the screen and sits on top of everything else via z-index.
<style>.videocontainer { position:absolute; width:1024px; height:768px; z-index:10000; }</style>
<div class="videocontainer"></div>
<video id="myVideo" width="1024" height="768" src="video/video1.ipad.mp4" autoplay></video>
Using your second approach (onclick) should work if you actually used the correct variable :)
<video type='video/mp4' id="myVideo" width="800" height="568"
src="video1.ipad.mp4"
onclick="window.location='http://www.example.com';" autoplay></video>
Note window, not document.
(disclaimer: didn't test this on iPad but worked in Chrome)