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.
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 add videosphere using aframe. But in android browser it does not work. I am using Samsung S6. In S6 I checked many examples along with my code. It does not work.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scene = document.querySelector("a-scene");
var vid = document.getElementById("video");
var videoShere = document.getElementById("videoShere");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
function run () {
if(AFRAME.utils.device.isMobile()) {
document.querySelector('#splash').style.display = 'flex';
document.querySelector('#splash').addEventListener('click', function () {
playVideo();
this.style.display = 'none';
})
} else {
playVideo();
}
}
function playVideo () {
vid.play();
videoShere.components.material.material.map.image.play();
}
})
</script>
</head>
<body>
<div id="splash" style="display:none;">
<div id="start-button">Start</div>
</div>
<a-scene>
<a-assets>
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" webkit-playsinline></video>
</a-assets>
<a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>
<a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>
</a-scene>
</body>
</html>
This is my code. What is the issue with my code? And why it does not work on android browser? Any way to solve this?
As per the A-Frame docs (https://aframe.io/docs/0.8.0/primitives/a-videosphere.html#caveats), you should have the following lines in your code to ensure they function properly in as many devices as possible:
<head>
...
<meta name="apple-mobile-web-app-capable" content="yes">
...
</head>
In the <video> element, itself, you will want to use this code to ensure that the video will play inline and will start playing immediately, if supported by the browser:
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
Note that crossorigin="anonymous" should be set when using assets hosted on other domains. It's also worth noting that some domains won't let you do this even if you use this code.
User interaction within the browser (outside of A-Frame) may be required to trigger the video for browsers that do not allow autoplaying by default. I modified your modal slightly to make it more visible:
<div id="splash" style="display: flex; height: 100%; width: 100%; z-index: 999999; position: absolute; background: rgba(0, 0, 0, 0.8);">
<div id="start-button">Start</div>
</div>
The javascript can be simplified just by placing the following code immediately before the ending </body> tag:
<script>
// User interaction modal to trigger video in some browsers/devices.
var modal = document.querySelector('#splash');
var video = document.querySelector('#video');
modal.addEventListener('click', function(e) {
video.play();
this.parentNode.removeChild(this);
});
</script>
Now, when a user clicks the modal splash screen, the event listener will capture the event, play the video, and remove the splash screen entirely from the DOM.
Here is a working demo: https://ultra-bass.glitch.me/
You just may need to add logic for detecting mobile devices, or more specifically, the devices that require this workaround.
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();
}
In the HTML5 spec, it suggests you put fallback material in the <video> tag for older browsers that do not support it.
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
However, I cannot find anything for fallbacks when all source types are unsupported. For instance, my Chromium browser cannot play video/mp4, but it can play video/ogg. So I would expect this to render the fallback text.
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Instead, I just get a video player with nothing in it because it can't load the mp4 file.
Is there a way to have a fallback in HTML 5 video when there is no usable video source? I am aware that the fallback I was attempting is only for old browsers, but I still need a fallback for no available source.
Actually, when you try to load unsupported media types in <source> element, an error event will fire.
You could then listen to these events, and if none of the sources is recognized, trigger the fallback :
var sources = document.querySelectorAll('source');
var source_errors = 0;
for (var i = 0; i < sources.length; i++) {
sources[i].addEventListener('error', function(e) {
if (++source_errors >= sources.length)
fallBack();
});
}
function fallBack() {
document.body.removeChild(document.querySelector('video'));
document.body.appendChild(document.createTextNode('No video with supported media and MIME type found'));
}
<video controls>
<source src="foo.bar" type="video/foo" />
<source src="bar.foo" type="video/bar" />
</video>
It's mentioned in the specs a way to fallback.
"listen to the error event on the last source element and trigger fallback behavior"
<div>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg"
onerror="parentNode.parentElement.innerText = 'Your browser does not support the video codec' ">
</video>
</div>
There's no HTML behaviour for this, so we'll have to add our own behaviour with JavaScript.
(function() {
"use strict";
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function setVideoFallback(lazyArea) {
var lowData = false;
if ("connection" in navigator) {
lowData = navigator.connection.saveData === true ||
navigator.connection.effectiveType === "slow-2g" ||
navigator.connection.effectiveType === "2g";
}
//DocumentFragments don't support getElementsByTagName
//oldIE doesn't support querySelectorAll
var lazyVideos = lazyArea.querySelectorAll ?
lazyArea.querySelectorAll("video") :
lazyArea.getElementsByTagName("video");
for (var i = lazyVideos.length; i--;) {
var lazyVideo = lazyVideos[i];
var cantPlay = true;
if (lazyVideo.canPlayType) {
//Loop through the various source elements, and check if
//the browser thinks it can play them
//This works better if we specify the codec along with
//the MIME type
var sources = lazyVideo.getElementsByTagName("source");
for (var i2 = sources.length; i2--;) {
if (lazyVideo.canPlayType(sources[i2].type)) {
cantPlay = false;
break;
}
}
}
//If on a low-data connection, remove the autoplay attribute
//(it's only polite)
if (lowData) {
lazyVideo.removeAttribute("autoplay");
lazyVideo.setAttribute("controls", "");
}
//If you can't play any of the available formats, skip straight to fallback content
if (cantPlay) {
//Extract the fallback and replace the video with it
var children = lazyVideo.childNodes;
for (var i3 = children.length; i3--;) {
var childNode = children[i3];
if (childNode.tagName !== "TRACK" && childNode.tagName !== "SOURCE") {
insertAfter(childNode, lazyVideo);
}
}
lazyVideo.parentNode.removeChild(lazyVideo);
}
}
}
/**
* Retrieve the elements from the 'lazy load' noscript tags and prepare them for display
*/
function setUp() {
//Get all the noscript tags on the page
var lazyLoadAreas = document.getElementsByTagName("noscript");
var supportsTemplates = typeof HTMLTemplateElement === "function";
for (var i = lazyLoadAreas.length; i--;) {
var noScriptTag = lazyLoadAreas[i];
//only process the ones marked for lazy loading
if (!noScriptTag.hasAttribute("data-lazy-load")) continue;
// The contents of a noscript tag are treated as text to JavaScript
var lazyAreaHtml = noScriptTag.textContent || noScriptTag.innerHTML;
// So we stick them in the innerHTML of a new div tag to 'load' them
var lazyArea;
if (supportsTemplates) {
//(if possible, templates are better as they won't start any network calls)
var lazyTemplate = document.createElement("template");
lazyTemplate.innerHTML = lazyAreaHtml;
lazyArea = lazyTemplate.content;
} else {
lazyArea = document.createElement("div");
lazyArea.innerHTML = lazyAreaHtml;
}
setVideoFallback(lazyArea);
noScriptTag.parentNode.replaceChild(lazyArea, noScriptTag);
}
}
//If the page has loaded already, run setup - if it hasn't, run as soon as it has.
if (document.readyState !== "loading") {
setUp();
} else {
document.addEventListener("DOMContentLoaded", setUp);
}
})();
<main>
<figure>
<!--[if !IE]><!-->
<noscript data-lazy-load>
<video height="338" width="600" autoplay loop muted>
<!--<source src="./Sample.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">-->
<source src="http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm; codecs=vp8,vorbis">
<source src="https://upload.wikimedia.org/wikipedia/commons/0/07/Backgammon_example.ogv" type="video/ogg; codecs=theora,vorbis">
<!--<![endif]-->
<img src="https://media2.giphy.com/media/BfbUe877N4xsUhpcPc/giphy.gif?cid=790b76115cadcffa59306b73776453f3" height="360" width="480"/>
<!--[if !IE]><!-->
</video>
</noscript>
<!--<![endif]-->
<figcaption>
A bunny emerging from his den and stretching.
<!--[if !IE]><!-->
<noscript aria-hidden="true"><p>
Note: Without JavaScript, the above animation might not play. In that case, the animation can be directly accessed
here.
</p></noscript>
<!--<![endif]-->
</figcaption>
</figure>
</main>
Using the canPlayType function, we ask the browser if it thinks it can play any of the source types. If it doesn't, we pull out the fallback content.
We encase the video in noscript tags so that it won't start loading until we've run the script (unless scripting is disabled, which is the desired behaviour).
We also use IE conditional tags, because oldIE can't read the contents of noscript tags with script.
(Tested with Edge, Firefox, Chrome, and every compatibility mode IE has. The Webm shows in all browers bar IE, which shows the GIF in every compatibility mode.)
#Jaw.sh There's two fallback options that are commonly in use.
Fallback to Flash version of the video.
Fallback to a direct download of the video.
Today's browsers (Opera I'm not sure and not really concerned), are all capable of playing MP4 H.264. So you shouldn't worry too much about incompatibilities, unless most of your viewers live in China.
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.