I've made a jquery script to pause the background music on click a video but it don't work. Can anyone help me?Here's my javascript:
<script src="../style/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#trailer").click(
function(){
$("#bgm").get(0).pause();
}
)
}
);
</script>
Here's my HTML:
<video height="340" width="864.5" id="trailer" onclick="goFullscreen('trailer');">
<source src="video.mp4" type="video/mp4">
</video>
<embed src="sound.mp3" hidden="true" autostart="true" loop="true" id="bgm"></embed>
Anyway, my embed mp3 can't loop too, can anyone correct it for me?THKS.
probably the embed element does not have the HTMLMediaElement interface which includes the pause() method. you can use the HTMLAudioElement <audio> instead.
than: access the audio element directly from your click event handler.
$("#bgm").pause();
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>
while my question may be similar to the one found at: hide video container when there's no video in database to be displayed HTML PHP, I am looking for a Javascript/jQuery solution.
Essentially the effect I need to achieve is that when the html5 <video> tag can't load the video from its src, I want the div the video tag is contained in to be hidden, preferably with a jQuery solution to this unless there's a very simple way to do this which I have over looked.
What i have so far looks similar to this:
<div id="video">
<video controls="controls" width="320" height="240">
<source src="published/video.mp4" type="video/mp4" />
</video>
</div>
Any input is greatly appreciated.
Here is a pure js solution:
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
$(document._video).hide()
});
Also you can look at the link below for other video events:
http://www.w3.org/2010/05/video/mediaevents.html
You can detect <video> support with http://modernizr.com/
if (!Modernizr.video) $('#video').hide();
http://modernizr.com/docs/#video
For check if file exists on server - How do I check if file exists in jQuery or JavaScript?
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bb.mp4" type="video/mp4">
<source src="mov_bb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
v.parentNode.style.display = 'none';
}, false);
</script>
</body>
</html>
Copied from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded
I followed the quick-start guide for videojs and placed the following code inside the body of my html document:
<video id="video" class="video-js vjs-default-skin" controls width="941"
height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
All works fine. Autoplay and controls in place.
As I needed to remove the video when the video ends I placed the following code right after the video tag:
<script type="text/javascript">
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
The problem is that everytime I try to detect some video the autoplay doesn't work anymore. Even the following doesn't trigger autoplay:
<script type="text/javascript">
_V_("video").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
Any idea on how I can keep the autoplay and listen to the ended event?
Well, I'm not sure if this is the most correct implementation but:
<video id="video" class="video-js vjs-default-skin" controls
width="941" height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
<script type="text/javascript">
interval = setInterval(videoLoaded, 100);
function videoEnd(){
$('#someid').slideToggle("slow");
setTimeout("$('#someid').remove()", 700);
}
function videoLoaded(){
if(!_V_.players.video){
return false;
}
_V_.players.video.play();
_V_.players.video.addEvent("ended", videoEnd);
clearInterval(interval);
}
</script>
From what I have read, the alternative is to load the video through js only.
This is a problem (from what I read) with the way videojs initializes the video objects. More details can be found here.
Hope it helps some bumper :)
actually better is to start videoLoaded function using setTimeout function, because you can not control your player (if you will need it).
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me