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>
Related
I'm newbie using ionic framework. I want to play file video in device uses ionic.
ex: path file '../Library/NoCloud/Test/demo.mp4'
Please help me.Thanks
You can find different approaches if you google or visit ionic documentation...
Here i made a simple example with basic html video tag and js.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.makeAction=function(){
var vidURL = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<video controls="controls" width="640" height="340" name="Video Name" ></video>
<button type="button" ng-click="makeAction()">play</button>
</body>
</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
The video is playing well in web browser.
But it's not working in android phonegap application.it's showing white color background alone.it's well working with fullscreen.
I have using below code :
<!DOCTYPE html>
<html>
<head>
<script src="js/video.js" type="text/javascript"></script>
</head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<body>
<video class="video" poster="images/playlink.jpg" controls="" width="768" height="432" preload="none">
<source src="http://www.w3schools.com/html/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://www.w3schools.com/html/movie.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
</body>
</html>
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
I am building one AudioBook android application using corona sdk. I am stuck with mp3 streaming.
Please help me.
Refer this website
Try this HTML5 code:
<head>
<title>Radio</title>
<meta name="viewport" content="maximum-scale=1, minimum-scale=1,
width=device-width, user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html { -webkit-text-size-adjust: none; }
body {margin: 3px 3px 3px 3px;}
</style>
</head>
<body>
<audio id="audio" controls autoplay src="http://oggvorbis.tb-stream.net:
80/technobase.ogg;"></audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>