I have created application in android phonegap.I want to play video using html5 video player.
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</body>
</html>
This code show the videoplayer .but video is not playing while clicking play button.what's wrong?
please guide me.
thanks in advance.
Android has issues with playing video and can often only be triggered via JavaScript by adding a click event handler to the video element and playing the video once that is activated.
For example:
function play() {
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}
You will probably need to adapt this code to work with yours though.
Everything immediately worked for me. I'm using an iOS emulator.
Make sure you set the permission to go to that URL.
Cordova.plist --> externalhosts
You can use a wildcard to cover several URL's into one.
Try to add this:
data-setup='{"controls":true}'
Add the following to your main Activity
#Override
public void init() {
super.init();
this.appView.getSettings().setPluginsEnabled(true);
}
We cant play video using in android. it works fine in iphone though. try using plugin for the purpose.
check this out
VideoPlayer Plugin
Related
I'm trying to use a video as a background for my div.
I've loaded the mp4 version of the video into my server, inside the public folder.
When I load the page the video doesn't seem to be there since it's all white, but when I try another video from another website this works fine.
Is there something I need to do while loading the video into my server or there is something wrong with my code?
<body>
<video id="bgvid" controls="controls" autoplay muted>
<source src="http://MyUrl/public/video.mp4" type="video/mp4">
</video>
<div class="overlap">
<div class="overlapalign"><div class="overlaptext">OVER TEXT</div></div>
</div>
</body>
Try including this script
<script type="text/javascript">
$(document).ready(function() {
$('video').get(0).play();
});
</script>
Html5 "autoplay" doesn't work with some browsers.
I am trying to make a MKV video with a MPEG4 video codec and AC3 audio codec available to be played online using Mozilla or Chrome. I have tried multiple methods including native HTML5, which plays back the video but no audio and from what I've read AC3 is a proprietary codec so it is not included in the supported codecs. The code for that was as follows:
<video width='1024' height='768' controls autoplay>
<source src="path_to_src" type='video/x-matroska'>
</video>
I then tried to use the VLC web plugin (as I know VLC can play the files correctly) but have not yet gotten it to play any file, there doesn't seem to be a lot of consistency in the examples for using this method. Here is what I have tried so far using the VLC plugin:
<embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2"
width="1024" height="768" id="vlc" autoplay="yes" target="path_to_file"></embed>
The VLC page here says to add this:
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
But the codebase doesn't seem to exist anymore and adding that classid to the code above has no effect on the playing of the file. Both methods result in the VLC player box being made but nothing ever getting played and the developer console doesn't show any errors.
So my question is does anyone know a workaround to get AC3 audio to play in the native HTML5 player or what the correct syntax is for the VLC web plugin? Or does anyone have a different player altogether they would recommend? Any and all help appreciated!
HTML5 does not support .mkv / Matroska files but you can use this code...
<video>
<source src="video.mkv" type="video/mp4">
</video>
But it depends on the browser as to whether it will play or not. This method is known to work with Chrome.
You can use this following code. work just on chrome browser.
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Amin Developer!" />
<title>Untitled 1</title>
</head>
<body>
<p><video src="http://jell.yfish.us/media/Jellyfish-3-Mbps.mkv" type='video/x-matroska; codecs="theora, vorbis"' autoplay controls onerror="failed(event)" ></video></p>
<p>Download the video file.</p>
</body>
</html>
To use video extensions that are MKV. You should use video, not source
For example :
<!-- mkv -->
<video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
<video width="320" height="240" controls>
<source src="assets/animation.mp4" type="video/mp4" />
</video>
My answer may be incomprehensible to you, so if you do not understand, click on
this
<video controls width=800 autoplay>
<source src="file path here">
</video>
This will display the video (.mkv) using Google Chrome browser only.
HTML5 and the VLC web plugin were a no go for me but I was able to get this work using the following setup:
DivX Web Player (NPAPI browsers only)
AC3 Audio Decoder
And here is the HTML:
<embed id="divxplayer" type="video/divx" width="1024" height="768"
src ="path_to_file" autoPlay=\"true\"
pluginspage=\"http://go.divx.com/plugin/download/\"></embed>
The DivX player seems to allow for a much wider array of video and audio options than the native HTML5, so far I am very impressed by it.
I'm trying to get a video to work with videoJS and with the help of the videoJS guide I got it working on Chrome and Firefox, but not IE8.
I've added the CDN tags to my head and created a videotag.
I'm using the following:
<video id="my_vid" class="video-js vjs-default-skin"
controls preload="auto" width="244px" height="196px"
poster="img/poster.jpg">
<source src="files/mymov.mp4" type='video/mp4' />
<source src="files/mymov.webm" type='video/webm' />
<source src="files/mymov.ogv" type='video/ogg' />
</video>
It seems like the Flash fallback isn't working in IE8, since it doesn't create a flash object when I look in my inspector (which it does at the homepage of videojs.com). The video tag just remains, and IE8 can't cope with that. The video on the homepage of videojs.com is shown properly in IE8.
What am I doing wrong?
Solved: It seems like I had to add data-setup="{}" as an attribute in the video tag. The only problem now is that the video won't play in Chrome.
You can force videJS to display flash. You can use rtmp streaming to use flash
vjs.options.techOrder = ["flash", "html5", "links"];
$(document).ready(function() {
setTimeout(function() {
vjs("videoPlayer").ready(function() {
var swfVideo = $("#videoPlayer_flash_api")[0];
swfVideo.vjs_setProperty("RTMPConnection", "path");
swfVideo.vjs_setProperty("RTMPStream", "videoName");
});
}, 1000);
});
I'm trying to play a Quicktime .mov file (wrapping an H264 video) in a browser using video.js. I've created a new Typescript project in Visual Studio 2012 and referenced the video file in a very simple html file adapted from the demo file downloaded from http://www.videojs.com/.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
data-setup="{}">
<source src="media/somevideo.mov" type='video/mp4' />
</video>
</body>
</html>
Unfortunately this doesn't appear to play in either Chrome or IE (I haven't tried other browsers). I've tried changing the type to type='video/quicktime' with no luck, and I've tried to remove the type attribute all together. In the former case the video 'loads' forever. In the second scenario, text appears at the top of the video object telling the used to download the latest version of Flash.
I've got a feeling this may be a MIME-type issue, but am not sure how to fix it. Does anyone know how to resolve this?
Steve
EDIT I'm going to give up on this. I've decided I can batch convert to H264 and create some metadata to extract the extra information I need. This makes life much easier that relying on video.js interacting with QT.
Different devices (and browsers) require different video formats. In the past, I've managed to get full support by using this service. However, you might be able to do it yourself with ffmpeg.
As you can see from the html source at videojs, multiple video file formats are included.
<video id="home_video" controls preload="none" poster="/img/poster.jpg" class="video-js vjs-default-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<track kind="captions" src="/vtt/captions.vtt" srclang="en" label="English"></track>
</video>
Using the new HTML audio tag:
<audio autoplay="autoplay">
<source src="../../audio/andromeda_oars.ogg" type="audio/ogg" />
<source src="../../audio/andromeda_oars.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
This works fine in all browsers I've tried (IE v10, Chrome v23, Opera v12, and Firefox v17). However, when I view the same pages in Kindle Fire HD, both audio files (ogg and mp3) play -- one after the other (which is driving me mad). This is not supposed to happen. Anyone have any answers and/or suggestions? Thanks! Happy Holidays....
This sounds like a bug in the Kindle Fire browser. If the first source file can be played, the second one should be ignored.
It might be worth changing the order of the source elements (i.e. put MP3 first). I doubt it will make a difference but just in case - could be some strange browser quirk.
Another possibility is a bug with the browser's autoplay implementation. Have you tried removing the autoplay attribute? If that's the problem then you could try using JavaScript's play() method on page load instead.
A more reliable solution is to use JavaScript to detect for codec support. Something like this should work:
HTML:
<audio id="myAudio">
Your browser does not support the audio element.
</audio>
JavaScript:
function getAudioType(element) {
if (element.canPlayType) {
// CanPlayType returns maybe, probably, or an empty string.
if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return('ogg');
} else if (element.canPlayType('audio/mpeg;') !== '') {
return('mp3');
}
}
return false;
}
var audio = document.getElementById('myAudio');
var audiotype = getAudioType(audio);
if (!audiotype) {
// Some fallback or not-supported message here
} else {
audio.src = '../../audio/andromeda_oars.' + audiotype;
audio.play();
}
UPDATE:
Example of this in action
I have tried the following HTML in the FireHD7 and it works fine - only one of the audio tags plays.
If you are still having a problem what version Silk browser are you using and is it on the HD7 or HD8.9 device?
<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=">
<title>Audio Test</title>
</head>
<body>
<audio id=audio0 controls autoplay="true">
<source src='http://www.russianlessons.net/audio/lesson3-20.mp3' type='audio/mpeg'>
<source src='http://www.russianlessons.net/audio/lesson3-20.ogg' type='audio/ogg'>
</audio>
</body>
</html>