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);
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/
As you could make a Youtube video it will automatically run ?
I used autoplay = 1 and does not work
The video is for Android app
The code from the video is:
<div class="demo-wrapper" data-role="page" id="tutoPage" style="margin-top: 0px;">
<div class="header" data-role="header">
<span class="title">Tutorial</span>
</div>
<div class="content" data-role="content">
<iframe id="bgvid" src="https://www.youtube.com/embed/*****?rel=0&autoplay=1" ></iframe>
<div id="tutorial" >
<a id='tuto' href='#initPage' >continuar</a>
</div>
</div>
</div>
Replace the ; before autoplay=1 with &.
EDIT: autoplay doesn't work on webviews. You have to use youtube api to achieve that.
Use the url like this:
https://www.youtube.com/embed/*******?rel=0&autoplay=1
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
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>
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