Jquery animate HTML5 Video - javascript

I am trying to get my video to start at 40% of its original size and once you mouse over it, it animates to 100%. The original size of the div is 760x520 pixels and I need it to start at 300x250 pixels. Heres is the HTML:
<div id="background">
<img src="image/background.jpg" width="760" height="520" style="width:760px;height:520px;position:absolute; top:9px; left:9px;">
<img src="image/videoPanel02.png" style="width:643px; height:366px;position:absolute;top:62px;left:68px;z-index:inherit;">
<img src="image/top_bar2.png" style="width:760px;height:60px;position:absolute;top:9px;left:9px;z-index:inherit;">
<img src="image/bottomMenu_bar.png" style="width:760px;height:45px;position:absolute;top:489px;left:9px;z-index:inherit;">
<div class="big-player" width="500" height="250" style="width:500px;height:250px;overflow:hidden;position:absolute;top:106px;left:134px;z-index:200;">
<video width="500" height="250" id="player2" preload="auto">
<source type="video/mp4" src="http://localhost/HTML5/video/big_buck_bunny.mp4" />
<object width="500" height="250" type="application/x-shockwave-flash" data="js/flashmediaelement.swf">
<param name="movie" value="js/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://localhost/HTML5/video/big_buck_bunny.mp4" />
</object>
</video>
</div>
</div>
and here is the script I have so far:
var videoplayer;
var playCount = 0;
$('video').mediaelementplayer({
features: ['playpause', 'progress'],
success: function (mediaElement, domObject, player) {
videoplayer = player;
$('.mejs-overlay-button').hide();
$('.mutebutton').show();
mediaElement.play();
player.setMuted(true);
//show poster image once the video stops and video restarts
mediaElement.addEventListener('ended', function () {
$('.image-end').show();
playCount++;
if(playCount>=3){
player.pause();
}
},false); //end ended function
}//close success
});//close mediaelementplayer
$('#background').each(function(){
$(this).width($(this).width() * 0.5);
});
$('#background').mouseover(function() {
videoplayer.setMuted(false);
$("#background").animate({
width:"100%",
}, 1500 );
});

Check if this FIDDLE give you some clue.
$(function () {
$("#video")
.on('mouseenter', function () {
$(this).animate({
width: 500,
height: 500
})
})
});

Related

Multiple YouTube Player API

All,
I am trying the implementation of buttons that control multiple videos at once.
▼Sample:
https://jsfiddle.net/g3q6ts0k/31/
▼HTML:
//play
var clickElement = document.getElementById("play");
clickElement.addEventListener("click", function(event) {
player.playVideo();
}, false);
//pause
var clickElement = document.getElementById("pause");
clickElement.addEventListener("click", function(event) {
player.pauseVideo();
}, false);
//change
$('#play').click(function() {
$('#play').css('display', 'none');
$('#pause').css('display', 'inline-block');
});
$('#pause').click(function() {
$('#play').css('display', 'inline-block');
$('#pause').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/ZxnRp4p9SGk?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/D-eX-rnvEzI?enablejsapi=1" frameborder="0"></iframe>
</div>
<button id="play">play</button>
<button id="pause">pause</button>
Do you know the reason why it does not work properly?
Thanks.

Get an overlay or placeholder on pause using autoplay on Hover HTML Video

I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you

HTML, JS How to play/stop video on hover

As you can see I have a question about playing/stoping video on hover. The user would hover the mouse on video and it would start playing and when he move the mouse away video would stop playing. Is it possible and how? I have video tag here
<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>
Update
A fix is added for the error that was thrown in the console when hovering over the videos (tested in chrome)
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
adding muted="muted" attribute to the video tag fixes the problem. For details see this answer
Here you go
$(document).ready(function() {
$(".myvideos").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
Try:
$("#video").hover(
()=>{ $(this).get(0).play(); },
()=>{ $(this).get(0).pause(); }
);
For this you have to use javascript. Easiest would be some kind of implementation with jQuery/javascript implementation.
You could also find this easily on the internet, this took me 3 seconds just by typing the "video on hover" in google: https://codepen.io/gil--/pen/bNxZWg
Html:
<div id="videosList">
<div class="video">
<video class="thevideo" loop preload="none">
<source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
</video>
</div>
</div>
You need to watch for hover event on video tag.
var figure = $(".video").hover( hoverVideo, hideVideo );
Now you add a function that plays video on hover:
function hoverVideo(e) {
$('video', this).get(0).play();
}
And when user leaves the video you add another function:
function hideVideo(e) {
$('video', this).get(0).pause();
}
To make a video play/pause on hover, try this:
JS:
var figure = $(".video").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
CSS:
video::-webkit-media-controls {
display:none !important;
}

How to show a hidden swf movie?

I have 2 swf in my html page which are video and popup. When mouse over to video.swf the hidden popup.swf will show and play.
<body>
<object id="video" class="video" width="300" height="250">
<param name="movie" value="thumbnail.swf">
<embed src="thumbnail.swf" quality="high" width="300" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
<img class="image" src="300x250.jpg">
<object id="popup" class="popup" width="790" height="290">
<param name="movie" value="790x290.swf">
<embed src="790x290.swf" width="300" height="250"> </embed>
</object>
<script>
document.getElementById("video").onmouseover = over;
(function over()
{
alert("mouseovertest");
});
</script>
The mouseover on video.swf is working fine but Im not sure how to make the popup.swf shows and play.
put this in your <script> section:
document.getElementById("popup").onmouseover = over;

Click to play vimeo

Trying to implement this feature click to play the vimeo video.
I found an example of this and figured it's possible some way. I saw it on this square up page: https://squareup.com/#video-testimonials
Anyone have any idea how they did this? They replaced the image with the video and had it play?
I just wrote some query to make this work. Given markup that looks like this:
<img id="vimeo-83741013" class="vimeo" alt=""/>
This jQuery will grab the thumbnail and make it click to play:
//Finds Thumbnails for Vimeo Videos
$('html').find('img.vimeo').each(function(index,item){
var vimeo_id = this.id.split('-')[1];
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + vimeo_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumb_src = data[0].thumbnail_large;
$(item).attr('src', thumb_src);
}
});
});
//Replace Vimeo Thumbnail with Vimeo Video
$('html').on('click', 'img.vimeo', function(){
var vimeo_id = this.id.split('-')[1];
var vimeoHeight, vimeoWidth;
vimeoHeight = $(this).outerHeight();
vimeoWidth = $(this).outerWidth();
var $iframe = $('<iframe />', {
src : '//player.vimeo.com/video/'+vimeo_id+'/?autoplay=1',
class : 'vimeo',
frameborder : 0
})
$iframe.attr('width',vimeoWidth).attr('height', vimeoHeight);
$(this).parent().removeClass('video');
$(this).replaceWith($iframe);
});
You can see an example in action here:
http://codepen.io/roundedbygravity/pen/pGAhC
That site uses VideoJS with the vimcss skin.
The video is in fact not hosted on Vimeo, but on Amazon S3, as you can see in the source:
<video id="cafe-video" class="video-js" width="470" height="264" controls="controls" preload="none" poster="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg">
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object class="vjs-flash-fallback" width="470" height="264" type="application/x-shockwave-flash"
data="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf">
<param name="movie" value="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["https://s3.amazonaws.com/square-production/video/caffelastazione.jpg", {"url": "https://s3.amazonaws.com/square-production/video/caffelastazione.m4v","autoPlay":false,"autoBuffering":true}]}' />
<img src="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg" width="470" height="264" alt="Testimonial" title="No video playback capabilities." />
</object>
</video>

Categories

Resources