My html5 video wont work on android phonegap build,
when i press on the video's play button i get the following errors in
the eclipse console:
MediaPlayer(3349): Uri is <URL suppressed>
MediaPlayer(3349): error (1, -2147483648)
MediaPlayer(3349): Error (1,-2147483648)
Im using video js, and my html code is as follows:
<video id="example_video_1" class="video-js vjs-intro-skin nilfiskvideo" controls preload="auto" poster="" data-setup="{}">
<source src="./assets/movies/intro/Intro_Film_Edit.mp4" type="video/mp4" />
<source src="./assets/movies/intro/Intro_Film_Edit.webm" type="video/webm" />
<source src="./assets/movies/intro/Intro_Film_Edit.ogg" type="video/ogg" />
</video>
I might add that my javascript looks like this:
var myPlayer = _V_("example_video_1");
myPlayer.src([
{ type: "video/mp4", src: this.model.get("mp4") },
{ type: "video/webm", src: this.model.get("webm") },
{ type: "video/ogg", src: this.model.get("ogg")}
])
myPlayer.play();
thanks.
Edit:
Okay so now i have try'ed the different solution proposals including using a plain native video object (no video-js).
but I still get the URL suppressed error.
Is there some permission that I need to set to allow the android device to play local media files, or should the videos be located in a certain folder?
<video id="example_video_1" class="video-js vjs-intro-skin nilfiskvideo" controls preload="auto" poster="" data-setup="{}">
<source src="movies/intro/Intro_Film_Edit.mp4" type='video/mp4; codecs="vc1.42E01E, mp4a.40.2"' />
<source src="movies/intro/Intro_Film_Edit.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movies/intro/Intro_Film_Edit.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<script>
$( 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>
try this
<video class="video" class="video-js vjs-intro-skin nilfiskvideo" controls preload="auto" poster="">
<source src="./assets/movies/intro/Intro_Film_Edit.mp4" type="video/mp4" />
<source src="./assets/movies/intro/Intro_Film_Edit.webm" type="video/webm" />
<source src="./assets/movies/intro/Intro_Film_Edit.ogg" type="video/ogg" />
</video>
Related
Goodday,
I have a question in regards to a video resource I use on a website. I have made a fiddle for it here:
https://jsfiddle.net/cgzLkqqc/
html
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
Javascript
var showReelVid = document.getElementById("showReelVid");
showReelVid.play();
Now this works fine as intended on the web, but it does not seem to work on android phones without adding controls to the video tag. Does anyone have an idea what I am missing here cause I see it does work on other sites that use a fullscreen video without controls.
Cheers.
Only video elements with the muted attribute set to true are allowed to autoplay on Android and iOS devices.
The following example would autoplay:
<div id="video_container">
<video poster="" width="500" id="showReelVid" muted autoplay loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
Your browser does not support HTML5 video :(.
</video>
</div>
https://jsfiddle.net/16j6851z/
If you require audio, have the video play on click (or with other user input) instead:
HTML
<div id="video_container">
<video poster="" width="500" id="showReelVid" loop preload>
<source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4"> Your browser does not support HTML5 video :(.
</video>
</div>
JS
var showReelVid = document.getElementById("showReelVid");
showReelVid.onclick = function() {
showReelVid.play();
};
https://jsfiddle.net/p8cmv1vc/
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?
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);
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