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>
Related
HTML5 Video is not working on my mobile device. I have faced several issues while trying to load video on my mobile browsers.
When I tried to remove controls, video itself is not showing in mobile browser. When I add controls, it loads but not playing using javascript play() function. All cases it works in desktop, but I need the same in mobile devices also
My html code is as follows
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width:100%;
max-width:500px;
height:auto;
}
#either-gif-or-video video {
display: none;
}
#media (-webkit-video-playable-inline) {
#either-gif-or-video img {
display: none;
}
#either-gif-or-video video {
display: initial;
}
}
</style>
<script>
window.onload = function() {
startPlayback();
}
function fallback(video)
{
alert(video);
}
var video;
var canvas;
function startPlayback()
{
if (!video) {
video = document.createElement('video');
video.src = 'https://mytestsite.com/myvideo.mp4';
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsinline = true;
video.controls = true;
video.addEventListener('playing', paintVideo);
}
var promise = video.play();
if (promise !== undefined) {
promise.then(_ => {
//alert('Autoplay started!');
}).catch(error => {
//alert('Autoplay was prevented.');
// Show a "Play" button so that user can start playback.
});
}
}
function paintVideo()
{
if (!canvas) {
canvas = document.createElement('canvas');
canvas.width = 400;//video.videoWidth;
canvas.height = 200;//video.videoHeight;
//document.body.appendChild(canvas);
document.getElementById("videoID").appendChild(canvas);
}
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
if (!video.paused)
requestAnimationFrame(paintVideo);
}
</script>
<body onclick="startPlayback()">
<h2>autoplay</h2>
<div id="videoID"></div>
<button onclick="startPlayback()" id="my-link">Start Playback</button>
</body>
</html>
You don't say what the problems is, but mobile browser video rules do change quite often so it is good to check the latest view.
The following is a good source and contains the example below that works and can be used as a basis for your page:
https://webkit.org/blog/6784/new-video-policies-for-ios/
<video autoplay loop muted playsinline>
<source src="image.mp4">
<source src="image.webm" onerror="fallback(parentNode)">
<img src="image.gif">
</video>
The guidelines for autoplay are, at the time of writing (Feb 2021):
< video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
< video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
< video muted> elements will also be allowed to autoplay without a user gesture.
If a < video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
< video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
< video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.
Full HTML5 code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Video Test</title>
</head>
<body>
<h1>Video Test</h1>
<video autoplay loop muted playsinline>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
</video>
</body>
</html>
Tested with iPhone 7 and iOS 11.2.6 and autoplays correctly.
I have a .mp4 video in my html page. I applied autoplay to that video, it stops at ending frame. My concern here is this video should come back at first frame once the video playing done. Can anybody please suggest what should i do to do this. Thanks
If you just want the video to loop and start again you can use the 'loop' attribute:
<video controls loop>
<source src="yourVideo.mp4" type="video/mp4">
...
</video>
If you want to detect the end of the video and do something else, like restart the video you can use the end of video event in JavaScript:
$("#yourVideo").on("ended", function() {
//Add whatever you want to do when the video ends here
video.pause();
video.currentTime = 0;
video.play(); //You may not need this - experiment on different browsers
video.pause();
});
Must include js file I am using CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
document.getElementById('Sample').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video =document.getElementById('Sample');
video.currentTime = 0;
video.pause();
}
});
</script>
HTML
<video src="video.mp4" id="Sample" autoplay>
video not supported
</video>
By javascript and assuming that you know the framerate of your video:
function goFirstFrame () {
var video = document.getElementById('videoId');
var frameTime = 1/25; // If your video is 25fps
video.currentTime = 0 + frameTime;
video.pause();
}
I have problems to get a video to play on my Android mobile in the latest version of Chrome. In other browsers like the Puffin browser the video is playing. For test purposes I tried all common formats:
mp4
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>
<br />
webm
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /></video>
<br />
ogg
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /></video>
https://codepen.io/anon/pen/ozpVNP
According to Mozilla the first video, that is H.264 + AAC in MP4 should play. I also take this article in account and tried to play the videos by JavaScript additionally as well as tried to remove the type attribute on the first video tag without success.
How can I get it work in Chrome on Mobile?
<video autoplay loop autobuffer muted playsinline>
<source src="video/video-hat.mp4" type="video/mp4">
</video>
The problem is that Google want that users initiate by themselves any media, so If you debug your device chrome browser, you will get the warning "Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture."
So that means you need to attach the video initialization, for example, with a click event
There doesn't appear to be any great info on this, so thought I'd post my findings.
I've been debugging html5 video playback on Chrome desktop and mobile on an Android 5.0.1 Samsung S4 with Chrome 61 and the embedded browser, and Safari 9 & 11, using an automatic javascript play/pause written in AngularJS (below). The video is embedded in a carousel so is sometimes visible, sometimes not. In summary:
I would recommend having both webm(vp8/vorbis) and mp4(h264/aac) formats. These are the most supported formats and have equivalent quality for the same bitrate. ffmpeg can encode both.
It seems Chrome mobile prefers webm if it can get it, so put that first.
If a browser plays a file when you direct it to the file url, this does not mean it will play it when embedded in a video tag, though it will tell you if the format & codecs are supported if it does play. Chrome mobile seems very picky about having a video source whose resolution is too high.
Safari (and probably iOS) will not play a video unless served by a server supporting byte-ranges. Apache, nginx and Amazon S3 for example do support them, but many smaller web servers (like WSGI servers) do not.
The order of the videos matters more than the source media attribute. Always have low resolution versions of a video first. The example below uses 1920x1080 and 1280x720. It seems if the mobile browser encounters a video that is "too high-res", it just stops processing the other sources and prefers the poster.
having a controls attribute and manual play vs playing through javascript doesn't appear to make any difference.
the muted attribute stops android from putting a little speaker icon in the status bar when playing but off-screen, even when the video doesn't have audio. As a side-note, I'd also really think about your audience if you intend to autoplay video with sound. Personally I think it's a bad idea.
the preload attribute doesn't seem to make much difference. The browser will tend to automatically preload the selected video metadata anyway.
having a source type attribute does not stop the video from playing. If anything it helps the browser choose which source to pick for the best
the JS video.oncanplay event is the best way to see if the video tag has been successful. If you don't get that, the video won't play, but the browser won't tell you why.
HTML:
<video class="img-responsive-upscale ng-scope"
video-auto-ctrl loop muted preload poster="0022.png">
<source src="vid_small.webm" media="(max-width: 1280px)" type="video/webm">
<source src="vid_small.mp4" media="(max-width: 1280px)" type="video/mp4">
<source src="vid.webm" media="(max-width: 1920px)" type="video/webm">
<source src="vid.mp4" type="video/mp4">
<img src="0022.png" alt="something"
title="Your browser does not support the <video> tag">
</video>
Javascript:
<script type="text/javascript">
angular.module('myproducts.videoplay', []).directive('videoAutoCtrl',
function() {
return {
require: '^uibCarousel',
link: function(scope, element, attrs) {
var video = element[0];
var canplay = false;
var rs = ["HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA"];
var ns = ["NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE"];
function vinfo() {
console.log("currentSrc = " + video.currentSrc);
console.log("readyState = " + rs[video.readyState]);
console.log("networkState = " + ns[video.networkState]);
bufinfo();
}
function bufinfo() {
// tr is a TimeRanges object
tr = video.buffered
if (tr.length > 0) {
var ranges = ""
for (i = 0; i < tr.length; i++) {
s = tr.start(i);
e = tr.end(i);
ranges += s + '-' + e;
if (i + 1 < tr.length) {
ranges += ', '
}
}
console.log("buffered time ranges: " + ranges);
}
}
video.onerror = function () {
console.log(video.error);
}
video.oncanplay = function () {
canplay = true;
if (!playing) {
console.log("canplay!");
vinfo();
}
}
var playing = false;
function playfulfilled(v) {
console.log("visible so playing " + video.currentSrc.split('/').pop());
playing = true;
}
function playrejected(v) {
console.log("play failed", v);
}
function setstate(visible) {
if (canplay) {
if (visible) {
p = video.play();
if (p !== undefined) {
p.then(playfulfilled, playrejected);
}
} else if (playing) {
video.pause();
console.log("invisible so paused");
playing = false;
}
} else {
console.log("!canplay, visible:", visible);
vinfo();
}
}
// Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load
scope.$parent.$watch('active', setstate);
}
};
});
</script>
I had an issue where the video worked on my desktop chrome, and desktop-mobile view, but not my iphone. Turns out i needed to add the "playsinline" property to the video tag. :]
The issue fixed for me after switching off "Data saving" mode in chrome.
I spend all my afternoon to fix an autoplay problem on iOS and discovered you just to disable the "ECO MODE" or it won't play automatically.
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);
}
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.