I'm having an issue making the Volume to 0 when the deviceready is triggered. Currently my codes are
<div id="dvVideo">
<video webkit-playsinline playsinline id="videoPlayback" poster="#">
<source src="#" type="video/mp4">
</video>
</div>
and scripts are
var vidcont = document.getElementById('dvVideo');
document.addEventListener('deviceready', function() {
vidcont.style.display = "none";
vid.src = "http://linktovideo.com/test.mp4";
vid.load();
vid.play();
vid.volume = 0.0;
});
What am I trying to achieve is that the video should preload before a button is clicked to play the video and it has to be hidden. What I'm currently doing is playing the video in the background, while the it is displayed as none, then when the button is pressed, it will displayed as block and video.currentTime is set to 0.0. Which makes the video seems to load fast.
Is there any alternative way to do this? I'm thinking of the preload="metadata" etc. but can't seem to get it to work. Can someone explain on the preload thing?
Edit: It works fine on any browsers but I just can't make it work on Android.
Goodday,
I have a question in regards to a video resource I use on a website. I have made a fiddle for it here:
https://jsfiddle.net/cgzLkqqc/
html
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
Javascript
var showReelVid = document.getElementById("showReelVid");
showReelVid.play();
Now this works fine as intended on the web, but it does not seem to work on android phones without adding controls to the video tag. Does anyone have an idea what I am missing here cause I see it does work on other sites that use a fullscreen video without controls.
Cheers.
Only video elements with the muted attribute set to true are allowed to autoplay on Android and iOS devices.
The following example would autoplay:
<div id="video_container">
<video poster="" width="500" id="showReelVid" muted autoplay loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
https://jsfiddle.net/16j6851z/
If you require audio, have the video play on click (or with other user input) instead:
HTML
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4"> Your browser does not support HTML5 video :(.
</video>
</div>
JS
var showReelVid = document.getElementById("showReelVid");
showReelVid.onclick = function() {
showReelVid.play();
};
https://jsfiddle.net/p8cmv1vc/
Spent way too much time on this now, has anyone got video.js working on android?
I can't!! works fine on ios and browsers
code,
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="200"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/1.mp4" type='video/mp4' />
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/01CPANewbies_Intro_x264_1.webm" type='video/webm' />
<source src="http://www.machupicchumobile.com/onlineApps/android/CPAforNewbies/01CPANewbies_Intro_x264_1.ogv" type='video/ogg' />
</video>
Video.js works fine on Android - but because the video.js controls are now disabled on mobile by default it's less obvious that it's working if you're not using the API.
I removed embedded video playing in Android completely by running this script before the initiation of video-js. It just links to the video file, so it will be played by a native video player.
if (navigator.userAgent.match(/Android/i) != null || (navigator.userAgent.match(/Chrome/i) != null && navigator.userAgent.match(/Mobile/i) != null)) {
$('video').each(function() {
var src = $(this).find('source[type="video/webm"]').attr('src');
var poster = $(this).attr('poster');
$(this).replaceWith('<div class="not-video-js"><img src="'+poster+'" class="posterframe-fake"><div class="not-video-js-button" tabindex="0" style="position:absolute; top:50%; left: 50%;"><span style="margin: -50px 0 0 -50px; position:absolute; top:50%; left: 50%;"><img src="img/btn_video_play.png"></span></div></div>');
});
}
Yes, Video.js works perfectly on Android devices both on Web Browsers as well as on Hybrid Apps(Cordova). Was running through tests across devices(samsung,sony) and android versions for playing locally stored video(.mp4) file, found it working perfectly on Android 4.0.4+ onwards.
For Web Browsers testing used this link It also has source code incase you want to use it.
Note: For local files make sure you have correct path for video files as they differ on earlier versions of Android.
Anyone know for sure if playing local mp3 file using HTML5 is possible or not in Android?
Playing mp3 files from url's works fine, but not when embedded in the app. Been searching for definitive answer.
Thanks for any help
<html>
<head>
<title>Audio Player</title>
</head>
<body>
<br /> <br />
<audio id="player" autoplay loop controls="controls">
<source src="bassscales.mp3" />
</audio>
<br /> <br />
<div>
<button style="width:85;height:75" button onclick="document.getElementById('player').play()">Play</button>
<button style="width:85;height:75" button onclick="document.getElementById('player').pause()">Pause</button>
<button style="width:85;height:75" button onclick="document.getElementById('player').pause(); document.getElementById('player').currentTime = 0;">Stop</button>
</div>
</body>
</html>
I had the same problem with HTML5 and <video> tag, video playing fine if called programatically from file system, but when called from the tag, didn't work,
the way I solved it is having a javascript function in the HTML call the android system, in your case for playing an mp3
Android JavaScriptInterface tutorial
also check my question in the same subject
note that you need to place in the correct folder the mp3 [sorry don't remember in which folder, make a search and find it easy]
so first do a hello world javascript calling a log or basic function in android,
then make the javascript call the play function,
good luck
ps.
playing mp3 from assets folder example
and calling Android methods with javascript
jsInterface example
Does this look correct for the HTML file?
<body>
<video id="video" controls height="270" src="http://dl.dropbox.com/u/39276137/intro1girl.mp4" width="480">
</video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener('click',function(){
MyAndroid.video.play();
},false);
</script>
then don't know what to put in the JavaScriptInterface.java class...thanks for all the help :)
I had developed a mobile page by asp.net to play mp4 video.
I know iOS had disabled the autoplay function to minimize user bandwidth, so how can i
autoplay HTML5 mp4 video on Android ?
I had already put autoplay in HTML5 code, but it doesn't work.
The following is my code:
<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>
Moreover, I had fixed the problem that user click on the image overlay can play the video.
Thanks Karthi
here are the code:
<script type="text/javascript">
$(document).ready(function() {
$("#video1").bind("click", function() {
var vid = $(this).get(0);
if (vid.paused) { vid.play(); }
else { vid.pause(); }
});
});
</script>
Thanks
Joe
You can add the 'muted' and 'autoplay' attributes together to enable autoplay for android devices.
e.g.
<video id="video" class="video" autoplay muted >
I used the following code:
// get the video
var video = document.querySelector('video');
// use the whole window and a *named function*
window.addEventListener('touchstart', function videoStart() {
video.play();
console.log('first touch');
// remove from the window and call the function we are removing
this.removeEventListener('touchstart', videoStart);
});
There doesn't seem to be a way to auto-start anymore.
This makes it so that the first time they touch the screen the video will play. It will also remove itself on first run so that you can avoid multiple listeners adding up.
Android actually has an API for this! The method is setMediaPlaybackRequiresUserGesture(). I found it after a lot of digging into video autoplay and a lot of attempted hacks from SO. Here's an example from blair vanderhoof:
package com.example.myProject;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebSettings;
public class myProject extends CordovaActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html");
WebSettings ws = super.appView.getSettings();
ws.setMediaPlaybackRequiresUserGesture(false);
}
}
I don't think autoplay works on Android, but getting a video to play can be annoyingly tricky. I suggest giving this article a read: Making HTML5 Video work on Android phones.
In Android 4.4 and above you can remove the need for a user gesture so long as the HTML5 Video component lives in your own WebView
webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
To get the video to autoplay, you'd still need to add autoplay to the video element:
<video id='video' controls autoplay>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>
Important Note: Be aware that if Google Chrome Data Saver is enabled in Chrome's settings, then Autoplay will be disabled.
Autoplay only works the second time through.
on android 4.1+ you have to have some kind of user event to get the first play() to work. Once that has happened then autostart works.
This is so that the user is acknowledging that they are using bandwidth.
There is another question that answers this .
Autostart html5 video using android 4 browser
similar to KNaito's answer, the following does the trick for me
function simulateClick() {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('player');
var canceled = !cb.dispatchEvent(event);
if (canceled) {
// A handler called preventDefault.
alert("canceled");
} else {
// None of the handlers called preventDefault.
alert("not canceled");
}
}
In Android 4.1 and 4.2, I use the following code.
evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
var v = document.getElementById("video");
v.dispatchEvent(evt);
where html is
<video id="video" src="sample.mp4" poster="image.jpg" controls></video>
This works well. But In Android 4.4, it does not work.
Here is a plugin for PhoneGap which solved the problem for me:
https://build.phonegap.com/plugins/1031
I simply included it in my config.xml
<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>
I simplified the Javascript to trigger the video to start.
var bg = document.getElementById ("bg");
function playbg() {
bg.play();
}
<video id="bg" style="min-width:100%; min-height:100%;" playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>
*"Files/snow.mp4" is just sample url
Can add muted tag.
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
reference https://developers.google.com/web/updates/2016/07/autoplay
don't use "mute" alone, use [muted]="true" for example following code:
<video id="videoPlayer" [muted]="true" autoplay playsinline loop style="width:100%; height: 100%;">
<source type="video/mp4" src="assets/Video/Home.mp4">
<source type="video/webm" src="assets/Video/Home.webm">
</video>
I test in more Android and ios
Chrome has disabled it. https://bugs.chromium.org/p/chromium/issues/detail?id=159336
Even the jQuery play() is blocked. They want user to initiate it so bandwidth can be saved.