WEBM / MP4 LOCAL files (from SD CARD) are not playing for me in the Android Chrome Browser (29.0.1457.59).
When i browse to this page in Android Chrome both the WEBM and MP4 are playing fine.
http://www.quirksmode.org/html5/tests/video.html
But if i download the 2 videos (big_buck_bunny.mp4, big_buck_bunny.webm) in the above URL in my Android Device and access them from the Chrome browser, both the videos are NOT playing for me.
I have also created an HTML page with the following VIDEO Tags. These are not working as well and i just get the BLACK Player with the controls.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fnOnLoad() {
var video1 = document.getElementById('vid_1');
video1.addEventListener('click', function () {
video1.play();
}, false);
var video2 = document.getElementById('vid_2');
video2.addEventListener('click', function () {
video2.play();
}, false);
}
</script>
</head>
<body style="padding: 0px; margin: 0px;" onload="fnOnLoad();">
<video id="vid_1" controls>
<source src="file:///mnt/sdcard/big_buck_bunny.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>
</video>
<br />
<br />
<video id="vid_2" controls>
<source src="file:///mnt/sdcard/big_buck_bunny.webm" type="video/webm">
<p>Your browser does not support WebM.</p>
</video>
</body>
</html>
Thanks
Seems to be fixed in the latest beta v30.0.1599.50
https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en
Related
This is the html.
<div class="flowplayer">
<video id="sourceVideo">
<source type="video/mp4" src="http://view.vzaar.com/5275507/download" />
</video>
</div>
works perfect in chrome and other browsers, when put on a webview in android emulator this is the output
Use WebChromeClient(), this is a basic example:
WebView videoView = (WebView)findViewById(R.id.webView);
videoView.getSettings().setJavaScriptEnabled(true); //Enable Js execution!
videoView.setWebChromeClient(new WebChromeClient());
videoView.loadUrl("http://www.jorgesys.com/myVideoDemo.html");
html code of myVideoDemo.html:
<html>
<head>
<meta content="width=device-width; height=device-height;" name="viewport">
<title>Jorgesys Video Demo</title>
<link href="resource://gre/res/TopLevelVideoDocument.css" rel="stylesheet">
<link href="chrome://global/skin/media/TopLevelVideoDocument.css" rel="stylesheet">
</head>
<body>
<video id="video" autobuffer controls="controls" autoplay="true" width="300" height="250">
<source src="http://broken-links.com/tests/media/BigBuck.m4v">
</video>
</body>
<script>
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
</script>
</html>
I am using HTML5 video tag to play video in phonegap app.In my app I have one listing page with multiple videos. I want to play them simultaneously.
PROBLEM
-------
To play video in phonegap android i used
$("#id").get(0).play();
$("#id1").get(0).play();
$("#id2").get(0).play();
With this only last one video plays and if click on other video it starts but pauses other videos.
I have no idea about problem.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
<video class='androidVid' id='video1' style='width:100%;height:240px' muted>
<source type='application/x-mpegURL' src='http://xx.xx.xx.xx/HLS/clawview.m3u8?t=Math.random()'>
Your browser does not support the video tag.
</video>
<video class='androidVid' id='video2' style='width:100%;height:240px' muted>
<source type='application/x-mpegURL' src='http://xx.xx.xx.xx/HLS/clawview.m3u8?t=Math.random()'>
Your browser does not support the video tag.
</video>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script>
$(function(){
$("#video1").get(0).play();
$("#video2").get(0).play();
});
</script>
</body>
</html>
thanks
i am getting error on logcat "mediaplayer error (-1,2147483648)" while trying to play a video on android using phonegap.
i am using cordova videoplayer plugin.
so why i am getting this error while testing it on android emulator api v14? am i missing something?? please help me out.
here i am pesting my entire code.
<!DOCTYPE html>
<html>
<head>
<script src="js/cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/video-js.css" type="text/css">
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<style>
body {
font-family: sans-serif;
border: 0;
margin: 0;
padding: 0;
}
header {
text-align: center;
}
#player {
display: table;
width: 100%;
padding: 4px;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
//This is on load , You can also use 'example_video_1' click event
var video = $('#example_video_1').get(0);
video.load();
video.play();
});
</script>
</head>
<body>
<header>
<h1>HTML5 Video Player</h1>
</header>
<div>
<section id="player">
<video id="example_video_1" class="video-js vjs-default-skin" controls autobuffer height="430" width="400">
<source src="/playvideo/res/raw/asd.mp4">
<source src="mrbeancart_c5bplN27.mp4">
</video>
</section>
</div>
</body>
</html>
thank you for any kind of help....
Maybe not the answer you are lookig for, but, there's no need to use a plugin, at least for me.
My workaround is to save the files locally and bind them from the root directory, into a html5 video tag, as I stated
here
Hope this helps.
Also, this will cause the error you write about on emulator, so the video never plays but it is confirmed in real devices. I have tested this approach in several models of android 4.0
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 am loading html page in asset folder to android webview, the html pages has video. But video not playing, Here i share the code.
<!doctype html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" charset="utf-8" src="video.js"></script>
<script>
function en(){
video1.play();
}
</script>
</head>
<body>
<div id="t2" width ="1024" height="768" style="background- image:url(images/L6_P007.jpg); background-repeat:no-repeat;">
<video id="video1" width="1024" height="768" poster="images/L6_P007.jpg" controls autoplay onended="en();" >
<source src="videos/L6_P007.mp4" type="video/mp4">
<source src="videos/L6_P007.ogv" type="video/ogg">
<source src="videos/L6_P007.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is my java code
WebView webview = (WebView) findViewById(R.id.webView1);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient());
webview.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webview.loadUrl("file:///android_asset/videosamp/videosamp.html");
this issue is discussed many times on SO. check the answers to similar question here
get the VideoPlayer Plugin for android here.
The video player allows you to display videos from your PhoneGap application.
This command fires an Intent to have your devices video player show the video.
Adding the Plugin to your project
Using this plugin requires Android PhoneGap.
To install the plugin, move www/video to your project's www folder and include a reference to it in your html file after phonegap.js.
Create a directory within your project called "src/com/phonegap/plugins/video" and move VideoPlayer.java into it.
In your res/xml/plugins.xml file add the following line:
<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>
Using the plugin
The plugin creates the object window.plugins.videoPlayer. To use, call the play() method:
/**
* Display an intent to play the video.
*
* #param url The url to play
*/
play(url)
Sample use:
window.plugins.videoPlayer.play("http://path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:///path/to/my/video.mp4");
window.plugins.videoPlayer.play("file:///android_asset/www/path/to/my/video.mp4");
window.plugins.videoPlayer.play("https://www.youtube.com/watch?v=en_sVVjWFKk");
Note: When playing video from the assets folder, the video is first copied to internal storage with MODE_WORLD_READABLE.