I am develop SPA application. In application i use
<pre>
<video id="video-container" width="720" height="480" data-bind="event : { ended: $root.closeVid }" controls preload="auto">
<source src="assets/video/video.mp4" type="video/mp4">
<source src="assets/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="assets/video/video.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
</pre>
and audio
<pre>
var audio = new Audio(dataModel.content.guidance.voiceover);
audio.play();
</pre>
Video and audio do not want to work on android 4.4.2. But works good on 5.1 ad 4.2.x.
Thanks for any help
I've been using the tag to switch between images depending on the media query. It works fine on Chrome on my Note 3, but on Firefox I've been having troubles. Let's say I have this code:
<picture class="thumb-set">
<source media="(min-width: 1200px)" srcset="http://placehold.it/360x202">
<source media="(min-width: 992px)" srcset="http://placehold.it/294x165">
<source media="(min-width: 768px)" srcset="http://placehold.it/345x194">
<source media="(min-width: 480px)" srcset="http://placehold.it/210x118">
<source media="(max-width: 479px)" srcset="http://placehold.it/290x163">
<img src="http://placehold.it/360x202">
</picture>
Firefox will correctly show whatever CSS I have for the min-width: 480px. However, it just constantly INSISTS on showing the picture source I have selected for min-width: 768px.
Anyone has an idea why?
need some help.
I'm building an app with HTML5 and using 'Intel XDK' to convert it to an .apk for android. The only issue I'm having is 'Looping' audio files.
I'm using a pretty simple code:
<audio id="myAudio" autoplay loop>
<source src="sounds/mysound.mp3" type="audio/mpeg"/>
<source src="sounds/mysound.ogg" type="audio/ogg"/>
</audio>
When I test the app the sound plays, but only once, no loop.
Thanks in advance!
You can achieve this in Java script in HTML by:
<script language="JavaScript" type="text/javascript">
var mp3snd = "songlocation.mp3";
var oggsnd = "home-sound.ogg";
document.write('<audio loop autoplay="autoplay">');
document.write('<source src="'+mp3snd+'" type="audio/mpeg">');
document.write('<source src="'+oggsnd+'" type="audio/ogg">');
document.write('<!--[if lt IE 9]>');
document.write('<bgsound src="'+mp3snd+'" loop="1">');
document.write('<![endif]-->');
document.write('</audio>');
//-->
</script>
It will achieve the same effect that you want (playing in background) while still being in HTML 5.
Installing this plugin might also help.
(Update for issue with XDK Android Sound Loop)
So I've made a compromise that works! Loops when app is running,but it won't run when the phone is locked.. Tested using Intel XDK Android build.
I created an internal IFRAME, that refreshes itself when the sound is over. Example below is a 1 minute sound:
On the page that audio is required:
<div id="audio_stream" style="position: absolute; margin-left: -1000px;">
<iframe src="iframes/audiotrack.html"></iframe>
</div>
This is the IFRAME code: (location: iframes/audiotrack.html)
<!--First, include refresh in meta-->
<meta http-equiv="refresh" content="60;url=audiotrack.html" />
<!--now enter audio that you wish to loop-->
<div id="audio_stream">
<audio controls autoplay="autoplay">
<source src="../sounds/FX/audiotrack.mp3" type="audio/mpeg"/>
</audio>
</div>
So it works, but not in the background. Anyone have any idea on how to keep this playing when the phone is locked?
Here is the html code:
<div data-role="page" data-theme="a" class="my-page" id="video">
<video id="video_tag" src="#" controls="controls"></video>
</div>
in js code:
$(document).on('pagebeforeshow', "#video", function () {
$('#video_tag').attr('src',data[curYear].video.url);
});
data[curYear].video.url = videos/1970.mp4 this is the path already set in my root folder
same code is working in browser but i am not getting any video in android tablet version 2.2 using phonegap android can anyone explain what is the issue?
Try this
<video width="356" height="200" controls poster="full/http/link/to/image/file.png" >
<source src="full/link/to/http/mp4/video/file.mp4" type="video/mp4" />
<source src="full/link/to/http/ogv/video/file.ogv" type="video/ogg" />
<source src="full/link/to/http/webm/video/file.wbem" type="video/webm" />
<em>Sorry, your browser doesn't support HTML5 video.</em>
</video>
Try below snippet. Hope it helps. If not, pls describe the error.
<div data-role="page" data-theme="a" class="my-page" id="video">
</div>
var url = data[curYear].video.url;
var videotag = '<video id="video_tag" controls preload="none">'+
'<source src="'+url+'" type="video/mp4" /><em>Your browser does not support the video file.</em>
'</video>';
$('#video').html(videotag);
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.