I want to show video poster after play. I am trying following code but no luck.
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
this.posterImage.show();
});
A more straightforward way of doing this:
<script type="text/javascript">
var video= $('#cms_video').get(0);
video.addEventListener('ended',function(){
video.load();
},false);
</script>
Which is a shortcut to loganphp answer. Indeed when changing the src of a video tag you implicitly call a load() on it.
This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client. But still it does answer the question the way loganphp asked it.
If you want to bypass this caveat you can use and overlay image/div and bind a click/touchstart event on it to show the video tag and hide the overlay. When the ended event has fired just hide the video tag and show the overlay image.
Finally I achieved my goal with following code
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
});
Simply at the end of video, show a div with the same src of the poster (with upper z-index or hide the video)
If you need to replay the video, bind a click event on the showed div (to switch visibility and replay)
**video start autoplay and Poster showing at end of video **
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
$$('video').each(function(elm){
elm.play();
var wrapper = elm.wrap('span');
var vid = elm.clone(true);
elm.observe('ended', function(){
wrapper.update(vid);
});
});
});
</script>
<video id="myvideo" poster="1.png" >
<source src="1.mp4" type="video/mp4" />
</video>
TRY THIS
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
v=video.currentSrc;
video.src='';
video.src=v;
$('#cms_video')[0].autoplay=false
$('#cms_video')[0].load()
});
Try to give your poster an id or class then you can do:
var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
$('#poster').show();
// ^ Use . here if you apply class instead of if for your poster
});
Related
I have a video element being used as the background of a section towards the bottom of a page I'm building. I'm trying to build a sort of 'lazy-load' for it by storing the src as a data-src attribute and using jQuery to apply it to the src attribute after the other assets have loaded (since it's not a hero image or anything, I want to load a poster to save cut load-time and then load the video later). It doesn't seem to be working for me at all. The src attribute is applied correctly but the video doesn't load or autoplay. Am I approaching this from the wrong angle? Is there a better way to accomplish it?
Building on wordpress.
Basic HTML
<video width="100%" loop controls autoplay class="connect-bg">
<source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>
jQuery Function
$(window).load(function(){
footer_lazyloader();
});
function footer_lazyloader() {
var $ = jQuery;
$("video.connect-bg source").each(function(){
var sourceFile = $(this).attr('data-src');
$(this).attr('src',sourceFile);
});
}
You can manually trigger the video to load and play by using '.load()' and '.play()' respectively. Target the parent of the 'source' element using 'parentElement' to accomplish this:
$(function() {
$("video.connect-bg source").each(function() {
var sourceFile = $(this).attr("data-src");
$(this).attr("src", sourceFile);
var video = this.parentElement;
video.load();
video.play();
});
});
My goal is to get the src of the video playing, when the video is played.
I currently have the following code:
<!doctype html>
<html>
<head>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var vid = document.getElementsByTagName('video')[0];
vid.addEventListener('play', function() {
console.log('video source:',this.src);
}, false);
</script>
</body>
</html>
So my first problem is that this.src doesn't work; it outputs an empty string. I assume this is because the src isn't actually part of the video tag, but is in the source child tag.
I then tried to add into my function the following:
for (var p in this) {
console.log(p, this[p]);
}
I did this to see if I could find any properties referencing it.. but I don't see anything that directly references it? So is the only way to get the source really to grab the child source nodes? If so... then...
My 2nd question, how would I determine which src attribute is actually being used to play the video? IOW if video.mp4 was actually used to play the video, I want to know that value, but if video.ogg was actually used to play the video, I want to know that value instead.
You can try this way:
var vid = document.getElementsByTagName('video')[0];
vid.addEventListener('play', function() {
console.log('video source:',this.currentSrc);
}, false);
Looks like media elements have a currentSrc property to get the chosen media file.
The HTML5 video element already has events, so there is no need to add a listener. This is how I would do it.
var myVid = document.getElementById('videoId');
if(myVid != null)//if possibility of no video loaded in DOM
{
myVid.onplay = function () {
console.log('video source: ' + myVid.currentSrc);
};
}
I'm trying to play a sound when i click or hover over my play button? Here's what i have so far. I have a button, if i hover over it it changes the Image, now i also want it to play an mp3.
play a {
position:relative;
float:left;
width:155px;
height:134px;
background-image:url(../images/Goodsound_PLAY_UP.png);
}
play a:hover {
background-image:url(../images/Goodsound_PLAY_P.png);
I want to play a sound here
}
Im sorry for asking such an easy question. I'm an html noob, started last week.
It's not that easy to play a sound in HTML. In fact, it wasn't until the html5 audio was there ! Even if html5 is not supported everywhere, it's now a little bit easier to play a sound in the browser.
My advice is to use mediaelementJS, a javascript library that fills the gap between old browser and html5 audio (and video) spec. Do not use the player (that comes with a full control bar), but use only the mediaelementjs component. To use it, simply include the library in the head of your page
<script src="js/libs/mediaelement.min.js"></script>
First, you have to put an audio tag in your html :
<audio id="mySound" src="my_audio_file.mp3" type="audio/mpeg"></audio>
Then, call the Mediaelement library
var mySound = new MediaElement('mySound');
Finally, play it on your click or over event (here I use jQuery)
$('.play a').mouseover(function(){ mySound.play() });
You can use this:
JavaScript
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}
where audio is an <audio> element, and play a is element which is hover.
Using jQuery:
$("object_element_id") .on ('mouseover', function(e){
// audio play code here
});
$("object_element_id") .on ('mouseout', function(e){
// audio pause/stop code here
});
Why "on"? Just imagine a "AJAX page refresh". For remove it:
$("object_element_id") .off ('mouseenter');
Why "mouseover" and "mouseout"? Maybe you want to add extra functions for each status, like change IMG SRC of the button, make some effects... feel free. And why the "e" element? The E element is the object who fired the event - the image, the link etc. Do everything with it (or just remove it).
For audio play, you can use HTML5 tags. It's easy and are supported by the major browsers (you didn't asked "retrocompatibility") You can cache the element (like Mateusz' answer) and use it:
var $audio = $("#audio_element_id"); //for cache the element
$audio.setAttribute('src', url_link); //for change the URL file (ir can be MP3, OGG...)
$audio.play(); //for the mouseover
$audio.stop(); //for the mouseout
Then, the final code:
var $audio = $("audio_element"); //caching
$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});
$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});
You might also find this code useful (I think it is fairly modern, so it might not work with old browsers; I use it with Firefox 32).
<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>
There is a similar one for video, too:
<video width="320" height="240" controls> <source src="clip.mp4" type="video/mp4"> </video>
How can I 'stop' a html5 video playback, and revert to poster image? Until this.play() is called, the poster image is showing properly.
My code:
<video loop="loop" onMouseOver="this.play();" onMouseOut="this.pause();" poster="/oceans-clip.thumb.jpg">
<source src="/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
This is working as expected, however I want to revert to poster image onMouseOut instead of just pausing the video. What's a good way to do this?
The spec rules this out:
the poster frame should not be shown again after a frame of video has been shown
I.e. if you want behaviour different to the spec you'll need to implement it yourself, maybe by using an element that overlays the video which contains the desired image and then hide/show it.
I've been googling for solution for this problem and apparently,
Steve Lacey's solution:
Sure. You could do the equivalent of 'video.src = "";
appears to work on my OSX 10.9, in browsers: Safari 7.0, Firefox 26.0 and Chrome 31. I haven't tested it on mobile devices though.
I've tested it using video object created with JS:
var object = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
object.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources
Now when I want to stop video and show poster again, I just do:
object.pause();
object.src = "";
But, that's not enough since video will not be able to play again. To make it playable after this point, I removed 'src' attribute (while leaving 'source' sub-objects as is):
object.removeAttribute("src");
After this it works:
play video
on stopping video, poster will re-appear
can play same video again
This post is old but I had the same problema and solve it like this.
onmouseout="this.load();"
i used it and it is good with me
$('container video').hover(function () {$(this).get(0).play();}
,function () {$(this).get(0).load();});});
This works for me:
<div class="rollover">
<video class="thevideo" loop poster="" height="100" width="250">
<source src="" type="video/mp4" >
Your browser does not support the video tag.
</video>
</div>
<script>
var figure = $(".rollover").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
v=$('video', this).get(0).currentSrc;
$('video', this).get(0).src = "";
$('video', this).get(0).src = v;
}
</script>
You can use:
<script type="text/javascript">
function videostop() {
window.location.reload()
}
</script>
That will not really stop your video, it will reload the whole document.
The "Poster Frame" will be shown.
Richie
P.S. I'm from Germany.
Sorry if my English is bad.
But I think, my JavaScript is OK :-)
I have multiple video plays on a single page which I need to listen for onplay and onpause triggers, and execute custom functions which take the IDs from each of the videos tags. I need to be able to get the video id that was activated. Ive tried a few different ways, with the simple vid.onplay event works well when I know what ID is being called into. I've tried the $("video").onplay but doesn't seem to be working.
jQuery( document ).ready(function($) {
$("video").onplay = function() {
alert("The video has been paused");
};
var vid = document.getElementbyid("myVideo");
vid.onplay = function() {
alert("The video has been played");
};
});
<video class="mdia_video_player" id=myVideo poster="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.jpg?336660464" id="v0" onclick="doplayvideo(" 0")"="" controls="">
<source src="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.mp4?1222152426" type="video/mp4">
</video>```
In your first demo, it should be $("#video") to call by ID. It also says .onplay and then says that is was paused so you might want to fix that.
Ended up doing a much simpler answer, videos are within a php loop. So, I placed this within the tag
onpause="dopausevideo(<?=$vid ?>)"
onplay="doplayvideo(<?=$vid ?>)"