The goal of what we are trying to do is get the user to click a link and then play a video fullscreen on mobile devices.
I am unable to get the below code working consistently on mobile devices using Video.js. We are using brightcove so I need to set the video element source dynamically. I can get the fullscreen working if the source is set initially, but even then it isn't consistent. We are testing on Android (Chrome, FireFox and the default browser) and iOS. For what it is worth we do not need to support desktop on this.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.dev.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264">
</video>
play
<script>
var video = videojs("example_video_1", {}, function(){
});
video.on("fullscreenchange",eventTriggered);
video.on("play",eventTriggered);
function playVideo(){
video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
video.play();
video.requestFullScreen();
return false;
}
function eventTriggered(e){
console.log("event:"+e.type);
}
</script>
</body>
</html>
Code variations
The below code works on FireFox and the default browser but not android. iOS plays but does not trigger the fullscreenchange event.
var video = videojs("example_video_1", {}, function(){
this.on("fullscreenchange",eventTriggered);
this.on("play",eventTriggered);
this.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
});
function playVideo(){
video.play();
video.requestFullScreen();
return false;
}
This as well has sporadic support
var video = videojs("example_video_1", {}, function(){
});
video.on("fullscreenchange",eventTriggered);
video.on("play",eventTriggered);
video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
function playVideo(){
video.play();
video.requestFullScreen();
return false;
}
EDIT:
On further investigation, on iOS it appears the native tech is used. It doesn't seem to manually trigger this.trigger('fullscreenchange'); as the alternatives do.
Lines 3519-3523 video.dev.js
} else if (this.tech.supportsFullScreen()) {
// we can't take the video.js controls fullscreen but we can go fullscreen
// with native controls
this.techCall('enterFullScreen');
} else {
Related
Are there any libraries for panning audio left or right in Cordova/Phonegap/Ionic? Ideally, I would like to have a sound file and play it out of either the left or right headphone channel but not both.
I have looked at the cordova-media-plugin, cordova-native-audio, cordovoa-audioToggle, and soundJS/createJS. Of these, only soundJS & createJS seems to be able to control the headphone output and panning, but it doesn't seem like it works with Cordova. Also there are no examples for angular / cordova.
On Android 6.0, the following script works. It makes use of the Web Audio API. I have not yet tested it on iOS, but I have a good feeling it will work there (please comment if it does not).
You need an "omg.mp3" file in your root directory to test with. You also should build using Cordova and not worry about the CORS or Same-domain error you might get in your browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>StereoPannerNode example</title>
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>StereoPannerNode example</h1>
<audio controls>
<source src="omg.mp3" type="audio/mp3">
<p>Browser too old to support HTML5 audio? How depressing!</p>
</audio>
<h2>Set stereo panning</h2>
<input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
<span class="panning-value">0</span>
</body>
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);
// Create a stereo panner
var panNode = audioCtx.createStereoPanner();
// Event handler function to increase panning to the right and left
// when the slider is moved
panControl.oninput = function() {
panNode.pan.value = panControl.value;
panValue.innerHTML = panControl.value;
}
// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
</script>
</html>
To embed a playlist, I use the following HTML code:
<iframe src="http://www.youtube-nocookie.com/embed/videoseries?list=PLcld7bnZTdpiTel3p6QbXKIb5i5Wontd0&autoplay=1&iv_load_policy=3&hl=de_DE" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
Unfortunately, there is no way to start e.g. by a specified video ID of the playlist. YouTube uses a parameter (for example &v=60MQ3AG1c8o) behind the playlist id to load e.g. the second video for sharing propose.
Is there a way, to load a specific video of the playlist. So the user is for example able to start directly with the second video and continue with the regular playlist.
If you have a better idea to present video playlists on web applications, please let me know.
The second question/issue I've got is, that it isn't possible on iOS or Android to play the youtube playlist in mobile browsers. Is there any known workaround, to make this possible for mobile devices?
Thank you.
We can replace videoseries with the video ID to start with, like 0-7IHOXkiV8:
<iframe src="http://www.youtube-nocookie.com/embed/0-7IHOXkiV8?list=PLcld7bnZTdpiTel3p6QbXKIb5i5Wontd0&autoplay=1&iv_load_policy=3&hl=de_DE" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
It's possible to load a playlist and start at a specific position if you use the full YouTube Player API, instead of just an <iframe> tag. Here's an example (jsfiddle version):
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoseries',
events: {
onReady: loadPlaylist
}
});
}
function loadPlaylist() {
player.loadPlaylist({
list: "PLhBgTdAWkxeCMHYCQ0uuLyhydRJGDRNo5",
listType: "playlist",
index: 4
});
}
That should work, but it's not right now; I'm going to follow up with the YouTube Players engineering team about why it's not starting playback at the video with index 4.
This answer contains a copy of the fiddle from the other answer, as some can't open the link.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>
YT video player
</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script type='text/javascript'>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoseries',
events: {
onReady: loadPlaylist
}
});
}
function loadPlaylist() {
player.loadPlaylist({
list: "PLhBgTdAWkxeCMHYCQ0uuLyhydRJGDRNo5",
listType: "playlist",
index: 4
});
}
</script>
</head>
<body>
<div id="player"></div>
</body>
</html>
i am trying to insert background audio on my first page on a phonegap app. Currently i am testing this on Android 2.2 (on actual phone) but final app is intended for iOS as well
I have used various methods, the only one that had some success is through javascript. I get a very weird behavior (for me at least). Audio plays only if i click on the button and not on page load even though both(button and ready function) call the same function (playAudio) and when the page loads i do get the alert which means that the playAudio function has been successfully called.
1) Do i do something wrong? How can i fix this please? any ideas?
2) why does the < embed > not work on Android (it works just fine as it should on the desktop browser btw). (i have used 2 embeds for testing purposes with different paths, none works on Android) This should be the easiest way to do background audio..
My intention is of course to get rid of the button and have the music to play automatically on page load.
thank you
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script>
$(document).ready(function(){
alert('ready');
playAudio('intro.mp3')
});
function playAudio(src) {
alert('func::playAudio(src)');
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('great error');
alert(e.message);
}
</script>
</head>
<body>
<div class="container-fluid">
<button id="button" onclick="playAudio('intro.mp3')"></button>
<embed name="introAudio" src="intro.mp3" loop="false" hidden="true" autostart="true">
<embed name="introAudio2" src="/android_asset/www/intro.mp3" loop="false" hidden="true" autostart="true">
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
I was able to use your code and get the audio to play when the page loads without clicking a button. I tested on Android 4.2 and on Android 2.2 and did not have any problems, beside having to remove the alert call in your playAudio function, since the alert() blocks JS execution and stops the call to play media until the dialog is dismissed.
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
console.log("Device is ready.");
playAudio('intro.mp3');
}
function playAudio(src) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() { console.log("working");} // in your question above,
// you have a comment that causes a missing '}'
function error_error(e) {
alert('great error');
alert(e.message);
}
This code works fine on both devices. As I pointed out above, in the code that you have in the question, your success method is invalid, because the comment hides the closing brace:
function success() { // ignore }
If you were to do
function success() { } then it will work.
Edit: also, the <embed> seemed to work fine for me on both..at least, I guess it did, since the audio was there. What do you mean "it doesn't work?" Do you expect some sort of UI controls or something?
i'm developing an app for iOS and Android with Phonegap 2.1.0 and jQuery Mobile 1.2.0. iOS version is already finished but we are experimenting some problems with the Android one...
One of the app sections is a list of videos and they are opened in a iframe inside a pop up, in iOS works well but if we try this in an Android device (Nexus 7 with Android 4.2) we only get the fist screenshot and when we press play only sound is played, without video. We've tryed to open the iframe url with childbrowser in a webview and the result is the same. Only if we open it in an external browser (openExternal) it seems to work.
I think maybe is Vimeo's player problem, but when we try to play the videos, we see this errors in the log:
01-08 22:45:12.084: E/libEGL(26580): call to OpenGL ES API with no current context (logged once per thread)
01-08 22:45:12.094: D/MediaPlayer(26580): Couldn't open file on client side, trying server side
I've been searching for hours without success, so i expect someone may know how to make it works... :/
For the iFrame, we are using the code Vimeo's giving us from the embed section of each video (i can´t post them here cause theyre private), and... Vimeo's option to make video compatible with mobile devices is marked as well.
Thanks!
HTML
<head>
<meta charset="utf-8">
<!--
| WARNING:
| For iOS 7, remove the width=device-width and height=device-height attributes.
| #see https://issues.apache.org/jira/browse/CB-4323
'-->
<meta name="viewport" content="width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui">
</head>
<body>
<div class="close">
fechar
</div>
<script id="tmpl-player" type="text/template">
<iframe id="video" src="https://player.vimeo.com/video/[[video]]?autoplay=1&autopause=1&byline=0&badge=0&title=0&portrait=1&color=333&loop=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</script>
<script>
var bodyEl = document.querySelector('body');
var tmplPlayerEl = window.document.getElementById('tmpl-player');
var tmplPlayer = template(tmplPlayerEl.innerHTML, getURLParams());
function getURLParams() {
var query = location.search.substr(1);
var result = {};
query.split('&').forEach(function(part) {
var item = part.split('=');
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}
function template(raw, data, keep404) {
return raw.replace(/\[{2,}[(\s\uFEFF\xA0a-zA-Z0-9_\./]+\]{2,}/gi, function(match, value) {
value = match.replace(/^\[{2,}|\s+|\]{2,}$/g, '');
return typeof data[value] !== 'undefined' ? data[value] : (keep404 ? match : '');
});
}
var newNode = window.document.createElement('div');
newNode.innerHTML = tmplPlayer;
bodyEl.appendChild(newNode);
</script>
</body>
JAVASCRIPT:
var fsVideo = window.open('vimeo.html?video='+video, '_blank', 'location=no,zoom=no');
fsVideo.addEventListener('loaderror', onLoadError);
fsVideo.addEventListener('loadstop', onLoadStop);
fsVideo.addEventListener('exit', onExit);
function onLoadError(evt){
fsVideo.close();
}
function onLoadStop(evt){
evt.url.match('cordova:close') && fsVideo.close();
}
function onExit(evt){
fsVideo.removeEventListener('loaderror', onLoadError);
fsVideo.removeEventListener('loadstop', onLoadStop);
fsVideo.removeEventListener('exit', onExit);
fsVideo = null;
}
Don't forget https://github.com/apache/cordova-plugin-inappbrowser
I have one question about access to the camera from the browser.
(Android and iOS browser)
Google and Apple announced 1 year ago, that the access from the browser to the camera should be available soon.
I need this function for a mobile Web Application.
Is this feature available now?
try the following:
<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>
I did using the input, as they said here, and worked really good on iOs. I could get a picture from camera or photo album and set an img element.
Here is the code: http://jsfiddle.net/2wZgv/
The js:
<script>
oFReader = new FileReader();
oFReader.onload = function (oFREvent) {
document.getElementById("fotoImg").src = oFREvent.target.result;
document.getElementById("fotoImg").style.visibility = "visible";
var screenHeight = screen.availHeight;
screenHeight = screenHeight - 220;
document.getElementById("fotoImg").style.height = screenHeight;
};
$(function() {
$("input:file").change(function (){
var input = document.querySelector('input[type=file]');
var oFile = input.files[0];
oFReader.readAsDataURL(oFile);
});
});
</script>
picture photo album mobile jquery camera
This is the w3c draft
After reading it the input tag should be
<input type="file" accept="image/*" capture="camera" id="capture">
Try this stuff.
<video id="Video" autoplay="autoplay" audio="muted" width="100%" height ="100%"> </video>
<script type="text/javascript">
if (navigator.getUserMedia) {
var video = document.getElementById('Video');
video.src = null;
navigator.getUserMedia('video', successCallback, errorCallback);
//if everything if good then set the source of the video element to the mediastream
function successCallback(stream) {
video.src = stream;
}
//If everything isn't ok then say so
function errorCallback(error) {
alert("An error occurred: [CODE " + error.code + "]");
}
}
else {
//show no support for getUserMedia
alert("Native camera is not supported in this browser!");
}
</script>
But remember this will work only with Opera Mobile for Android. No other browser right now supporting with camera access. Up to my knowledge iOS won't support this feature now, may be in future.
Thank You.
This is possible. You can access camera through your browser application. If you are developing through Phone Gap then look for http://docs.phonegap.com/phonegap_camera_camera.md.html
This is the camera API in PhoneGap to access camera.