Trying to play a video on mouseover and rewind to beginning and show initial thumbnail image on mouse out.
Here's what I have so far:
<video poster="image.jpg" src="video.webm" id="id0" onMouseOver="id0.play()" onMouseOut="id0.pause();currentTime = 0;window.location.reload()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm" ></video>
But that just reloads the entire page and not just the thumbnail image.
Any ideas?
Use the load() method like so:
function stopReload() {
vPlayer.pause();
vPlayer.currentTime = 0;
vPlayer.load();
}
See FIDDLE
Related
I have a video page and I use photos as thumbnails. I want to convert photos to video playback in .webm format. I wrote a script that, when you hover over a photo element, adds and plays a video tag.
$(function(){
$('.item-image').hover(function(){
$('.item-image video').remove();
$v = $(this).attr('v');
if ($v){
$p = '<video src="'+$v+'" class="p" ></video>';
$(this).append($p);
}
$(this).children('video').play();
}, function(){
$(this).children('video').remove();
});
});
Unfortunately, when hovering, the autoplay does not work. You must first click in the video to play.
I noticed that after clicking and refreshing the page, playing the video after hovering the cursor works correctly. Do you have any idea why it does not work as it should?
I found a solution.
It was enough to add a muted to video tag
<video src="URL" loop muted autoplay class="p" ></video>
I am working on bxslider jquery plugin. I am including the videos also. If the current slider is video means when i will click the next button, the current video will be pause and when i come again that video slider that video will be auto play where the video was paused.I need to handle all the video like this. I use video tag for video.
please try this.
Here is the API document of bxslider.
onSlideBefore
Executes immediately before each slide transition.
So we pause all the video when this event triggered.
$bxslider.find('video').each(function() {
this.pause();
});
onSlideAfter
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
So we play the video which is in current active slide.
// arguments:
// $slideElement: jQuery element of the destination element
// get the video element, assume only one video in each slide
var video = $slideElement.find('video')[0];
// if this slide contains video and video has been played then continue the video
video !== undefined && video.currentTime !== 0 && video.play();
I am having a few issues with a script. For a project I have a container, this container has 8 separate thumbnails which when dragged into my container need to play the corresponding video. I have got 90% of the script working but having a few issues with the drag and drop side of things.
When a thumbnail is dragged into the location it is appending the video correctly but the thumbnail then freezes on top of the container... It should revert back, however when you drag another video in, it reverts back but the first stays fixed. Then when another is dragged into the container, this plays on top of my video. I need to tweak my script to simply:
Revert the thumbnail back to it's position.
Remove any current video that is there.
Append the new video.
Autoplay the video if possible.
This is my script:
$(document).ready(function(){
$(".drag").draggable({
revert: true,
containment: "#content"
});
$(".drop").droppable(
{
drop: function (event, ui)
{
var url = $(ui.draggable).attr('videourl');
var oggurl = $(ui.draggable).attr('oggurl');
var $videocontainer = $('#video-container');
var $video = $('#video');
$videocontainer.empty().append('<video id="video" controls width="400" height="300"><source src="'+url+'" type="video/mp4" /><source src="'+oggurl+'" type="video/ogg" /></video>');
$video.get(0).play();
}
});
});
My jsfiddle is here:
http://jsfiddle.net/9tny5eh6/5/
Many thanks in advance.
Here's the fiddle:
http://jsfiddle.net/karanmhatre/9tny5eh6/6/
JS
$(".drop").droppable(
{
drop: function (event, ui)
{
$(".drag").animate({
top: "0px",
left: "0px"
});
var url = $(ui.draggable).attr('videourl');
var oggurl = $(ui.draggable).attr('oggurl');
var $videocontainer = $('#video-container');
$videocontainer.empty().append('<video id="video" controls width="400" height="300"><source src="'+url+'" type="video/mp4" /><source src="'+oggurl+'" type="video/ogg" /></video>');
$('#video').get(0).play();
}
});
In the drop event, move all .drag elements to the original place using animate. Then, use $('#video') selector to select the video AFTER you have added it to the DOM.
The problem with your solution was that you were referencing the #video object from the DOM when it wasn't even present.
Revert the thumbnail back to it's position. - Done
Remove any current video that is there. - Done
Append the new video. - Done
Autoplay the video if possible. - Done
As mentioned in your scenario, You don't need to drop the element.You can just use drag function and check the coordinate positions.If the coordinate positions lie in the container then you play the video else not
Every question on the subject explain how to remove the controls of an HTML5 video element.
videoElement.removeAttribute('controls');
But browsers, Firefox and Chrome, have a way of just hiding the controls which makes them disappear when cursor is not moving and the video is playing. And makes them appear again if you move the cursor or when video stops playing.
<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
Video test file: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
If you play the above video, and leave it alone without moving the cursor, the controls will disappear. The if you move the cursor again they'll appear again. They'll also appear upon pausing or video finishing.
Very much like popular native or desktop video players.
This is what I want. I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Is there a way to achieve this without removing the controls entirely?
Try this:
$("#myvideo").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
// if always hide
$("#myvideo2").click(function() {
if( this.paused)
this.play();
else
this.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
Put a div over the video and hide/show that, you answered your own question;
I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Also take a look at this;
Styling HTML5 Video Controls
I'm using videojs.com library and the solution was to add
.vjs-control-bar {
display:none !important;
}
to the stylesheet.
You can set event listener on your video and remove controls on play
<video id="video">
<source src="http://example.com/video.mp4" type="video/mp4"/>
</video>
<script>
video.addEventListener('play', () => {
video.setAttribute('controls', 'true');
});
video.addEventListener('pause', () => {
video.removeAttribute('controls')
});
</script>
use this:
video::-webkit-media-controls {
display: none;
}
you don't need javascript. use CSS.
Display:none on the controls.
Along with the poster image I want a loader image(an animated gif) to be displayed while the video is being downloaded. How is it possible ?
A cheap way could be to use an animated GIF in the poster attribute which will be replaced when the video begins to play. Example:
<video poster="loading.gif" preload="auto" controls autoplay>
<source type="video/mp4" src="video.mp4"/>
</video>
Here is my solution for this problem since pixelearth's answer doesn't seem to work on firefox (probably a problem with the fake poster)
HTML
<video id="video1" height="236" preload="auto" controls>
<source src="yourVideo.mp4">
Your browser does not support HTML5 video.
</video>
JS
$('#video1').on('loadstart', function (event) {
$(this).addClass('background');
$(this).attr("poster", "/your/loading.gif");
});
$('#video1').on('canplay', function (event) {
$(this).removeClass('background');
$(this).removeAttr("poster");
});
CSS
video.background {
background: black
}
With this answer you don't have to mess around with fake poster or abuse attributes for purposes that they were not made for. Hope this helps.
P.S. You could of course add some more events to add the poster attribute e.g. if it can't play further in the middle of the video and needs more buffering
You can find a jsfiddle which shows my code here
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading')
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading')
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
You could attach a listener to the video's loadstart event and use it to overlay an animated GIF on top of the video element, then hide the loading overlay once the loadeddata event fires. See The W3C's media events draft for a list of events you can hook into.
They also have a demo page for media events.
This is quite complicated, you must listen to various video events to show/hide & update width of the loader image correctly. Those events include (but may not limited to): loadstart, progress, loadeddata, waiting, seeking, seeked. You can use a certain open source player (e.g. jPlayer) or download its source to examine further.
<video
id="mainVideo"
width="100%"
style="max-width: 100%; max-height: 100%;"
preload="auto"
autoplay="autoplay"
(loadeddata)= "checkVideoLoaded()"
>
<source [src]="assets?.video?.urlMP4" type="{{videoType}}">
</video>
on isVideoLoaded flag show and hide loader
this.isVideoLoaded = false;
checkVideoLoaded(){
this.isVideoLoaded = true;
}