I'm currently working on a app with some native and html5 features.
The streamed content will be loaded in a webview.
I need a html5 videoplayer with a playlist, autoplay and autorepeat(loop).
I have it working on my chrome webbrowser. But for some reason it wont work in the webview on android.
<video id="awesome_video" width="100%" height="100%" src="video/video.mp4" autoplay />
<script type="text/javascript">
var index = 1,
playlist = ["video/video.mp4", "video/video2.mp4"],
video = document.getElementById('awesome_video');
video.addEventListener('ended', rotate_video, false);
function rotate_video() {
video.setAttribute('src', playlist[index]);
video.load();
index++;
if (index >= playlist.length) { index = 0; }
}
</script>
On android it wont start automatically, and when I touch the screen to play it takes some time to buffer. But after that no video is shown.
I know a repeat function that works on android:
video.addEventListener('ended', function()
{
video.currentTime=0.1;
video.play();
}
In my android app i've already set my webview as chromeclient:
mWebView = (WebView) findViewById(R.id.wvMain);
mWebView.setWebChromeClient(new WebChromeClient());
I can get it working without playlist and autoplay(just a single video played repeatedly).
Hope anyone knows how to get this working on an android device, thx.
Related
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.
I'd like to play a video using WebView capabilities.
Currently I'm able to play the following html in all browsers I've tested (Chrome, Chrome for Android, Navegator for Android). Unfortunately, I can not get it playing inside my own application using a WebView: the player's controls are shown, but clicking at play button make the seek bar goes to the end and a progress circle takes place and never ends.
Here are the relevant code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video);
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setPluginState(PluginState.ON);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/www/index.html");
}
index.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video1</title>
</head>
<body>
<video id="video" controls height="240" width="360">
<source src="index.files/html5video/video1.m4v">
</video>
<script type="text/javascript">
var vid=document.getElementById('video');
vid.addEventListene('click', function () {
vid.play();
}, false);
</script>
</body>
You can rely that all files are placed in the right place.
I know this is an old post, but I was having the same issue on my Galaxy S3. I solved it with this :
webView.SetWebChromeClient (new WebChromeClient ());
It worked just fine on Nexus 7 without this line, but on Galaxy S3 for some reason it just spun the loading circle forever.
NOTE: I also have these set:
webView.Settings.PluginsEnabled = true;
webView.Settings.JavaScriptEnabled = true;
webView.Settings.SetPluginState (WebSettings.PluginState.On);
webView.SetWebViewClient (new WebViewClient ());
I had the same problem, none of solutions found at others helped me. I have tried many different ways to solve this, but I didn't managed. So, my solution was to display a thumb instead of video, this thumb was an image linking to video source and when this thumb pressed, the video starts in Android native video player. You could try this if didn't resolved it yet.
Later, I found this: https://code.google.com/p/googletv-android-samples/source/browse/#git%2FWebAppNativePlayback It works by playing video in webview as you want, but the problem is you can not control video controls from D-pad keyboard.
Hope you got a solution!
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 have created one sample phonegap application, the objective of that application is to play an static mp3 file.
I have placed the file under the following location /android_asset/www folder.
The HTML5 content is as follows:
<html>
<head>
<title>PhoneGap Back Button Example</title>
<script type="text/javascript" src="phonegap-1.2.0.js"></script>
<script type="text/javascript">
var myMedia = null;
var playing = false;
//Method for playing the audio Track1 file
function playAudio() {
if (!playing) {
myMedia.play();
document.getElementById('play').src = "images/pause.png";
playing = true;
} else {
myMedia.pause();`enter code here`
document.getElementById('play').src = "images/play.png";
playing = false;
}
} </script>
<body onload="onLoad()">
<h1>Audio Player</h1>
<p id="audio_position">0.000 sec</p>
<p>
//The Html page contains a dropdown of option from which we can select the source from where the media file can be played
<select id="playlist" onchange="updateMedia()">
<optionvalue="/android_asset/www/audio/track1.mp3">Asset</option>
</select>
</p>
<img id="play" src="images/play.png">
<img id="stop" src="images/stop.png">
</body>
</html>
The activity class is as below:
package com.plugin.myapp;
import com.phonegap.DroidGap;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// super.loadUrl("file:///android_asset/www/index.html");
WebView webview = new WebView(this);
setContentView(webview);
//Media.getContentUriForPath("/android_asset/www/audio/track1.mp3");
//this helps to load the html page
webview.loadUrl("file:///android_asset/www/audio/example.html");
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
}
}
What might the problem be?
Create a MEDIA object before trying to play it...
Something like this...
myMedia = new Media(src, onSuccess, onError);
here src is the audio file that you want to play
http://docs.phonegap.com/en/2.0.0/cordova_media_media.md.html#Media
HTML5 audio is not reliable across mobile web views. On android 2.x, which is on 80% of all Android devices, it is not supported at all. You can see platforms where HTML5 audio is supported here: http://caniuse.com/#feat=audio On platforms where it is supported, there are codec inconsistencies, so some devices can play MP3, some cannot, but can play other audio encoding formats. The previous answer is correct, you can use PhoneGap's Media class to reliably play MP3 audio. If you are using multiple audio files, and want the ability to preload them or layer them (like in a game scenario), you can also use the LowLatencyAudio native plugin.
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.