we have the requirement in the project that having 3 videos in an html page like shown in the following image.
Now by clicking at the bottom-right corner on each of this video user can resize the video and accordingly the size of other videos will change. The problem i am facing here is how to resize the video by just pressing and dragging the mouse click on the bottom-right corner of each video, i've tried using resize property of video tag but it resizes the width and height of the controllers of the video. Do i have to use any third party API or JavaScript or am i doing any silly mistake?
by doing some RND on this i came to know about canvas. but doesn't get any idea how to use it with video together.
can anyone please guide me here? Any kind of help would be greatly appreciated.
CODE :
<!DOCTYPE html>
<html>
<head>
<style>
video{
resize:both;
}
</style>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
To be honest it's a little bit confusing that you have so many resize handles. It also makes things pretty complicated.
This is what I came up so far, this should give you a good sense of the complete implementation:
var $cont = $('#container'),
contWidth = $cont.width(),
contHeight = $cont.height(),
$one = $('#one'),
$two = $('#two'),
$ltop = $one.find('.ltop'),
$lbot = $one.find('.lbot');
$ltop.resizable({
handles: 'se',
minWidth: '100',
maxWidth: '400',
resize: function() {
var width = $(this).width(),
height = $(this).height(),
remSpaceH = contWidth - width,
remSpaceV = contHeight - height;
$one.width(width);
$two.width(remSpaceH - ($two.outerWidth() - $two.width()));
$lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height()));
}
});
Demo: http://jsfiddle.net/dfsq/KuAsz/
This is way better: http://jsfiddle.net/ScDmp/9/
<div id="myContainer">
<video width="320" height="240" controls id="myVideo">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<div>
<input type="range" min="100" max="500" step="50" id="mySlider" value="0" onchange="document.getElementById('myVideo').width = this.value;"/>
Then you may change the input slider with a timer which will check the width of the canvas every second and re size the videos accordingly.
You may try something like this with jquery ui resizable:
function ready(){
$("#myContainer").resizable();
var interval = setInterval(checkWidth, 1000);
function checkWidth()
{
$("#myVideo").width($("#myContainer").width());
}
setTimeout($("#myContainer").width("100px"),1000);
setTimeout($("#myContainer").width("200px"),5000);
setTimeout($("#myContainer").width("300px"),10000);
}
Related
I would like to use a video as a background in a website, but I would like to provide a smaller a clipped version so mobile phones don't have to download full version and waste bandwidth. How could I do it?
I've tried the following, but the browser downloads both before showing only one. I would like the browser to download only one video
<video controls>
<source src="b.mp4" type="video/mp4" media="screen and (max-width: 800px)">
<source src="a.mp4" type="video/mp4" media="screen and (min-width: 801px)">
</video>
Thanks in advance
Since there´s no other way to show/hide video at different resolutions, you can use JS or jQuery, try this solution (modify it according to your need)
var video = $('#yourVideoId');
var width = $(window).width();
if (width < 1200) {
//It is a small screen
video.src="yourVideoSrc_Small.mp4";
}
else
{
//It is a big screen or desktop
video.src = "yourVideoSrc_Big.mp4";
}
video.type = "video/mp4";
video.load();
See if this example code below is doing what you want.
It uses JavaScript to check the device's screen.width and set's a URL for the <video> tag according to size. The video tag is accessed by its id. As a starting point, it has a fake/empty URL (later updated by code).
<!DOCTYPE html>
<html>
<body>
<video id="myvid" controls>
<source src="nothing.mp4" type="video/mp4">
</video>
</body>
<script>
window.onload = (event) => { myFunction( event ) };
function myFunction( event )
{
alert("Screen Width is: " + screen.width);
let myvid = document.getElementById("myvid");
//# if BIGGER THAN the 800 pixels
if ( screen.width > 800 ) { myvid.src = "a.mp4"; }
//# if SMALLER THAN or EQUAL-TO the 800 pixels
if ( screen.width <= 800 ) { myvid.src = "b.mp4"; }
//# load URL (for playback)
myvid.load();
}
</script>
</html>
I have a problem with my javascript code, I made a hover effect for a text to play a video. but now I want to hide the video when you not hover the text. when I'm adding a hidden element, the hover effect does not work anymore...
Do you guys know the solution?
<script type="text/javascript">
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
}
function PlayH(){
if(Hvideo.paused)
Hvideo.play();
}
if(Hvideo.pause){
Hvideo.hidden = true;
}else{
Hvideo.hidden = false;
}
</script>
<div>
<video id="Hvideo" width="320" height="240" preload="auto">
<source src="URL will be added" type="video/mp4">
</video>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
your code appears to be essentially working:
https://www.w3schools.com/code/tryit.asp?filename=GMLBBYWJV4I2
<div>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
<video id="Hvideo" width="320" height="240" controls>
<source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
Hvideo.hidden = true;
}
function PlayH(){
if(Hvideo.paused) {
Hvideo.play();
Hvideo.hidden = false;
}
}
</script>
I do wonder if the issue is down to the fact that you need the HTML elements to exist before you run your JavaScript, and it will fail if the JavaScript runs before the elements appear on the page.
I use this to have a video player on browser
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )
<video width="320" height="240" controls id="video">
<source src="video.mp4" type="video/mp4">
</video>
$(document).ready(function() {
var time = 15;
var scale = 1;
var video_obj = null;
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
video_obj = this;
}, false);
document.getElementById('video').addEventListener('loadeddata', function() {
var video = document.getElementById('video');
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#thumbnail').append(img);
video_obj.currentTime = 0;
}, false);
});
Source 1
Source 2
Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.
I did it this way:
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
html:
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}
Add #t=15 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.
I am searching for the holy grail of a simple looping html5 video, I am currently using the following code which doesn't seem work
<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
<source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>
Can anyone could hilight why this code doesn't work/suggest their best work arround?
Surely you just need to set the loop attribute (see fiddle tested in Chrome):
<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
<source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>
If firefox still doesn't like the loop attribute, try the following fix:
document.getElementById('myVideo').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
Update:
Perhaps not as simple as you had hoped but, as a work around for the problem, it might be worth trying one of the many HTML5 video libraries such as video.js. If the problem persists you could, as a worst case, force the library to use Flash where supported (ie. desktop) and fall-back to HTML5 where it's not (as explained here).
Here is the fiddle with working example of HTML5 video player that loops several videos. Just add your URLs to src array...
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
"http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
"http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
$('#video').attr("src", src[curSrc % src.length]);
curSrc++;
var video = $('#video').get(0);
$('#video')
.on('loadedmetadata', function() {
video.currentTime=0.01;
video.play();
})
.on('ended', function() {
console.log('ended');
video.src = src[curSrc % src.length];
video.load();
curSrc++;
});
});
</script>
How do I play two videos in a sequence in the HTML5 video tag?
In Google Chrome, the following code plays only the first intro video.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var i = 0;
var sources = ['1.mp4', '2.mp4'];
videoElement.addEventListener('ended', function(){
videoElement.src = sources[(++i)%sources.length];
videoElement.load();
videoElement.play();
}, true);
</script>
</head>
<body>
<video id="videoElement" width="640" height="360" autoplay="autoplay">
<source src="intro.mp4" type="video/mp4"></source>
</video>
<body>
<html>
Browser should fire error 'videoElement is not defined' with your JavaScript code, you must get video element from DOM instead of using its id directly. Please change your code to
$(document).ready(function() {
//place code inside jQuery ready event handler
//to ensure videoElement is available
var i = 0;
var sources = ['1.mp4', '2.mp4'];
$('#videoElement').bind('ended', function() {
//'this' is the DOM video element
this.src = sources[i++ % sources.length];
this.load();
this.play();
});
});
In case someone came across this question again, here is my solution to similar problem-I needed to play first video once and then second video in a loop. I also have support for .webm, .m4v and .mp4.
This is my JS:
$(document).ready(function(){
var vid = document.getElementById("landing-video");
vid.onplay = function() {
var source=vid.currentSrc;
folder = source.match(/(.+)(\/)/);
ext = source.match(/(\.\w+)$/);
};
vid.onended = function() {
$("#landing-video").attr({
"src":folder[0]+"video-2"+ext[0],
"loop":""
});
};
});
And this is my HTML:
<video autoplay="" muted="" poster="" id="landing-video">
<source src="my-folder/video-1.webm" type="video/webm">
<source src="my-folder/video-1.m4v" type="video/x-m4v">
<source src="my-folder/video-1.mp4" type="video/mp4">
</video>
This might save someone some time.