Play multiple videos when dragged into an area with jquery - javascript

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

Related

Video play on mouseover/thumbnail image show on mouse out

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

Get dimensions of HTML5 video (playing region - not division) during playback

I have a HTML video in a division. When the user changes the size of the HTML window the playing area of the video changes to maintain its aspect ratio leaving boarders around the video (depending on how the window is resized).
Is there a way of obtaining the dimensions of the actual playback region of the video within a division (not the division itself).
I've tried:
console.log($("#video").css("height"));
Where #video is the id of the video itself, but it seems to return the division height, not the video playback area.
This needs to happen within a window resize event handler:
$( window ).resize(function() {
//Detect playback window size
}
My solution was to get the original video size (see HTML5 Video Dimensions) and then compute the height and width based on the original aspect ratio.
The problem, as explained in that page, is that those dimensions are only retrieved after loading the metadata (which in my test page happened only after playing the video). The way to make the video load the metadata is to use the preload="metadata" attribute on the video tag.
The rest is just combining these:
var aspectratio=1;
resizeHandler();
$("video").on('loadedmetadata',function() {
var width = this.videoWidth;
var height = this.videoHeight;
aspectratio=width/height;
resizeHandler();
});
function dis(v) { return Math.round(v*100)/100; }
function resizeHandler() {
var height=$('video').height();
var width=$('video').width();
var actualHeight=Math.min(height,width/aspectratio);
var actualWidth=Math.min(width,height*aspectratio);
$('#spnInfo').text('ratio: '+dis(aspectratio)+' width: '+dis(width)+', height:'+dis(height)+' ,actual width: '+dis(actualWidth)+', actual height:'+dis(actualHeight));
}
$(window).resize(resizeHandler);
$('#btnResize').click(function() {
$('video').css({height:Math.random()*600+50,width:Math.random()*600+50});
$(window).trigger('resize');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btnResize" value="Resize" /><span id="spnInfo"></span><br/>
<video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls=""
preload="metadata" style="width:200px; height:500px">
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm">
</video>

Hide (not remove) HTML5 video controls

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.

vine like player with html 5

How do you make a player similar to whats vine use using HTML 5 tags
<video width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
What i want to do is following
Remove control bar
Add a volume button like in vine player (on hover)
Overlay div on the bottom to show info (on hover)
Example vine player
https://vine.co/v/h7tUrqaWuTB/embed
If anyone can give me tip or a tell me place i can get some info on how to do this highly appreciated. Thanks and advance.
For the on hover div, you would need javascript. The div should be hidden by default using CSS.
var divToShow = document.getElementById('divToShow');
var video = document.querySelector('video'); //gets the video element
video.addEventListener('mouseover', function(element) {
divToShow.style.display = 'block'; //show the div (block could be replaced with any of the display options)
});
video.addEventListener('mouseout', function(element) {
divToShow.style.display = 'none'; //hide the div
});
The New Boston has an HTML5 tutorial that includes four or five videos on video tag customizations using the javascript video api. They may help you with your other issues.
The New Boston HTML5 Tutorial

fade HTML5 video image / poster in and out

Is it possible to fade out the HTML5 video poster / oimage if we start the video and fade it in again when we pause or stop the video?
Normally the poster image is directly hidden when the video is started and also directly shown when we load the video / stop it
Maybe we can clone the poster image to a canvas, position it over the video and fade it out and in?
Is there an existing solution / script?
The behavior of the poster attribute is really driven by the <video> tag itself. You're just telling it, before starting display this image. Like any video element customization, this would require you to have your own elements involved. Basically, you would have:
<div class="video-container" style="position:relative">
<video width="x" height="y"></video>
<img style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
</div>
You would then have to bind your events, for example with Zepto:
$('.video-container img').bind('click', function() {
var $img = $(this),
$vid = $img.parent().find('video');
$img.animate({opacity: 0}, 1000, 'linear', function() {
$img.css({visibility: 'hidden'});
$vid[0].play();
});
});
Similarly, you would listen for the pause event and when it occurs fade back in.
That said, this is probably a bad idea for two reasons:
This probably won't work for iOS or any device that prevents scripted playback. In these devices, you can only trigger play() when inside a click event handler. Since you're playing a second later, you don't really have control.
You're breaking default functionality. When I pause a video, I may want to seek to another moment but I definitely want to know where I left off. The lack of a visual queue takes that away.
Update
Here's a different approach that would help you get around the iOS difficulties. In this case, you actually start the video on click, meaning there will be a period of time where the fading image covers the playing video, so it's your call.
$('.video-container').each(function() {
var $img = $(this).find('img'),
$vid = $(this).find('vid');
$img.bind('click', function() { $vid[0].play() });
$vid.bind('play', function() {
$img.animate({opacity: 0}, 1000, 'linear', function() {
if($vid[0].playing) {
$img.css({visibility: 'hidden'});
}
});
});
$vid.bind('pause ended', function() {
$img.css({visibility: 'visible'});
$img.animate({opacity: 1}, 1000, 'linear');
});
});

Categories