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>
Related
when i route app (Ionic(Capacitor)) to external website camera stream preview work only when touching
android
private void loadWebView() {
// ...
webView.loadUrl("https://example.com/");
}
on example.com js code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<body>
<video id="stream" autoplay playsinline width="200" height="200"></video>
</body>
</html>
<script type="text/javascript">
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
document.getElementById('stream').srcObject = stream;
});
</script>
on localhost all fine
P.S on a Cordova browser too fine
i try use browser from cordova, but it's hard for me
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
JWPlayer which is integrated in web browser(website) is working fine on all desktop browser where as coming to mobile it is not working and also showing that "Error loading media: File could not be played" can any one help me in fixation of this,Here I am attaching concern code thanks in advance.
<html lang="en">
<meta charset="utf-8"></meta>
<head>
<link rel="stylesheet" type="text/css" media="screen, handheld" href="style.css" />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="ui.js" type="text/javascript"></script>
<script type="text/javascript" src="jwplayer.js" ></script>
<script>jwplayer.key="UqsxqSzE4fs4e3/+JJ4g2zVO2jxpFkwT31IzfQ=="</script>
</head>
<body>
<div id="myElement">Loading the player...</div>
<div id="player"></div>
<input type="text" id="stream" value="rtmp://192.168.2.108:1935/live/test.stream"></input>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="status"></div>
</body>
</html>
RTMP is, by definition, a Flash format. There's no Flash on a mobile device.
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>