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.
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 need to make a HTML5 page that can display live video coming from the device's camera/webcam and that has a button that can take a snapshot; nothing fancy (similar to html5camera.com). I tried following some tutorials (http://www.html5rocks.com/en/tutorials/getusermedia/intro/ AND http://davidwalsh.name/browser-camera), but I'm still new at HTML, so I'm not sure what to do with the code snippets I find.
I copied some code into a HTML-file, but when I open it with Chrome, it says at the right in the address bar that it blocked access to the camera and microphone (without bothering to ask for permission). When I click the option to ask for permission next time and reload the page, nothing happens. There is no way to set the preferences to allow by default. I also tried Chrome Canary (same as Chrome) and Firefox (didn't ask for permission).
Did I make a mistake in the HTML? Is Chrome the problem?
The code I have so far:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>
You might also consider just going native. You can add native camera and camcorder support to any web app on Android, iOS or Windows Phone 8 very easily with BridgeIt: http://bridgeit.mobi. It's a simple javascript api that allows you to access native mobile features.
http://graysonearle.com/bluemen/
Click on that with a webkit browser. On load it should have a 4x4 grid of videos appear, but only 1-3 videos tend to load on Chrome. Works just fine on Safari, what gives? They are the same video. When I did it with a smaller video it worked fine, I suppose this could have something to do with it. Is there any way to force a load on more than a few videos on a page?
if you suffix each video with a cache buster it seems to work fine. On Chrome it does the right thing and loads the first frame as a poster fairly quickly, but on Safari you need to explicitly select a poster
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
</head>
<body>
<script>
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/fullvid.mp4?a='+i+'" type="video/mp4">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/red.webm" type="video/ogg">');
document.write(' </video>');
document.write('</div>');
}
</script>
</body>
</html>
If that doesn't work (and it looks like the browser buffer can still sometimes get choked) then what you need to do is load the video sources one by one, triggering the load on the canplaythrough event.
all in all it doesn't seem very robust, good luck
EDIT
Okay, this version is more robust, but needs a little tidying up....
it grabs the video once as a blob via an async ajax call, then passes it as the source to each of the video elements... you'd probably want to load a poster into the videos and display some sort of progress bar until the video has loaded.
I had to do this sample against my test video because I don't have cross-domain rights to your domain so couldn't easily test with your size video... but give it a try
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <\/video>');
document.write('<\/div>');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jcath-drg.s3.amazonaws.com/BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
// myBlob is now the blob that the object URL pointed to.
for (var i=0;i<10;i++) {
display(i,vid)
}
}
};
xhr.send();
function display(i,vid){
var video = document.getElementById("vid"+i);
console.log(video);
video.src = vid;
}
</script>
</body>
</html>
I have got my video & its playing fine, but now i need to add a logo on my video tag at right bottom corner(the coordinates(2,2,60,60) icon size is 60*60),
I thought of using canvas, but came up some thing like this..
<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
return;
}
var context = element.getContext('2d');
if (!context || !context.drawImage) {
return;
}
var google_img = new Image();
google_img.addEventListener('load', function () {
context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";
},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4" width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video>
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>
any help to get it..
thanks in advance
shameer ali shaik
You could simply use a div as loxxy said in a comment, but if you really want to use canvas for some reason here is a jsfiddle with your code (fixed) :
http://jsfiddle.net/aS9VG/
The trick is to set the element to an absolute position so it can overlap another element :
style="position:absolute;right:150px;bottom:300px"
When SoundCloud HTML5 Player Widget is loaded with autoplay option, play event not firing when track starts.
However there is a timeout between loading the widget (or loading other URL into the widget) and when the track starts, so it's nice widget to call the event.
Is this by design or is it issue to be solved?
The HTML5 Player widget should fire a SC.Widget.Events.PLAY event when the auto_play option is used. Here's a code snippet I used to verify:
HTML:
<!doctype html>
<html>
<head>
<title>Widget Demo</title>
<style type="text/css">
iframe {
display:block;
border:0;
margin-bottom: 20px;
height: 365px;
}
</style>
</head>
<body>
<iframe id="widget" width="100%"></iframe>
</body>
<script src="http://w.soundcloud.com/player/api.js"></script>
<script src="script.js"></script>
</html>
JavaScript (the contents of script.js):
(function() {
var iframe = document.querySelector('#widget');
iframe.src = 'http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/43315398&auto_play=true';
var widget = SC.Widget(iframe);
widget.bind(SC.Widget.Events.PLAY, function(eventData) {
alert('Playing...');
});
}());
You can check out a working example here on jsfiddle.