I am creating a website, where users can upload their videos. I'm using the HTML5 video player from http://videojs.com/. How can I make HTML5 player play only MP4 on all browsers? If that is impossible, are there any ways to maybe convert MP4 to other formats?
Please read this blog post for the updated info: http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/
[Old Answer: Outdated]
If you provide both Ogg Theora & MP4 format then, you can cover almost all modern browsers (ref). And, with some small effort you can find a lots of PHP implementation of the most popular & powerful open source video converter (ffmpeg). Or, you can make a small class for it too. Then use as -
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.ogv" type='video/ogg'>
</video>
PHP ffmpeg wrapper libs-
http://code.google.com/p/phpvideotoolkit/
http://ffmpeg-php.sourceforge.net/
Related
I have been reworking a web site to optimize for SEO. One thing I did is to optimize Images using Googles Webp Format. But Webp is not supported on any version of Safari.
My question is: What can I do to load one image (Webp) if supported or load another like JPG if not supported.
It could be great if it is something like the Audio or Video TAG
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Add your code like as below and it should most probably work.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>
More details are mentioned here in this link.
I assume you are using only 1 image in src (in img tag) if that fails to load then you are trying to loan any other image. So, You can use
<img src="invalid_link" onerror="this.onerror=null;this.src='other_image_url';">
Hope this helps.
How can I play an mp3 and generate a wafeform image using HTML5 or Jquery?
Thanks Advance!
Playing an audio file with HTML 5 is pretty straight forward:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Above Example from W3Schools
As for generating a waveform I'd check out waveform.js
How can I add media player in codeigniter,
I use below code, but still can't show the video :
<video width="205" height="180" controls>
<source src="application/views/web/videostreaming/video2.mp4" type="video/mp4" />
<source src="application/views/web/videostreaming/video2.ogv" type="video/ogg" />
<source src="application/views/web/videostreaming/video2.flv" type="video/flv" />
</video>
I added video sources in application/config/mimes.php like this:
'mp4' => 'video/mp4',
'flv' => 'video/flv',
'ogv' => 'video/ogv',
output error is:
No video with supported format and MIME type found
please help me to resolve this problem, thank you
Your error No video with supported format and MIME type found is a client-side issue, meaning that the browser cannot play any of your provided video files. Changing the CodeIgniter mime types isn't going to help you (unless perhaps you are processing all requests including those for static files through PHP). Check that your MP4 file is using H.264/AAC codices, and you OGV file is the Theora/Vorbis codicies and that these file paths are correct (you may want to dynamically create absolute paths using CodeIgniter's base_url() function).
The video tag is something new in html5 and doesn't support by browsers well.
i recommend you :
Flash (.swf) media player for html
Embed Tag
Hi iam still struggling play mp4 format in video tag in html 5 here is my code
<?php
?>
<video width="560" height="340" controls>
<source src="http://ifliptips.com/admin/abc.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<?PHP
?>
here is link http://ifliptips.com/admin/VueGuides/video.php
can any one guide me what i wrong in this code.i try to play this link in chrome as well as IE9.
Thanks for advance.
There's a problem with the way you encoded your video. If you open your current video in VLC and go to Codec Information you'll see under video it says: Codec: mp4v but you're specifying the video codec is avc1.42E01E in your type attribute.
I don't know what codecs the browsers are restricted to playing, but if you convert your video
to avc1 (you can download a converted version here: http://www.online-convert.com/result/d1bb21daf90f8b77377d4c9f81398eff -- see it's codec info in VLC has changed to avc1) the browsers will play it.
Wayne
i am currently trying to build a html5 video page with restrictive access to the videos. Therefor i want to put the videos out of web root and have some kind of script check the user account and deliver the video.
If i put a .ogv (theora) and a .mp4 (h264) file just into webroot and use a video tag with multiple source tags, they work on all tested browsers: Firefox (ogg), Chrome (ogg), IE9 (mp4), Safari (mp4), Opera (ogg)
<video id="currentVideo" controls width=640>
<source type='video/ogg; codecs="theora, vorbis"' src="http://mysite/1.ogv" />
<source type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' src="http://mysite/2.mp4" />
</video>
Now the first question that comes up is: Why is chrome using the ogg format? It scrubs much faster through the timeline with mp4 videos and it does support mp4 videos... Is there a way to mark a format as 'preferred format'?
Now if i put the files out of my webroot and use a php script like this to deliver them:
download.php:
$path=explode('/',$_SERVER['PATH_INFO']);
if (sizeof($path)>1) {
$inf=explode('.',$path[1]);
$id=intval($inf[0]);
$type=$inf[1];
$ctype='';
if ($type=='ogv') {
$ctype='video/ogg';
} elseif ($type=='mp4') {
$ctype='video/mp4';
}
$fname=sprintf('/var/outsidewebroot/videos/test.%s',$type);
http_send_content_type($ctype);
http_throttle(0.1);
http_send_file($fname);
}
which should put out the file including support for http range queries.
HTML:
<video id="currentVideo" controls width=640>
<source type='video/ogg; codecs="theora, vorbis"' src="http://mysite/download.php/1.ogv" />
<source type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' src="http://mysite/download.php/2.mp4" />
</video>
Opera is not able anymore to determine playing length of the video, and even worse: google chrome (and its free clone iron) hang (mac and windows) - chrome itself remains running, but the tab loading the site is locked
Is there a way to mark a format as 'preferred format'?
List them in order of preference. You have ogg first, so it is taken as preferred.
<video id="currentVideo" controls width=640>
<source type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' src="http://mysite/2.mp4" />
<source type='video/ogg; codecs="theora, vorbis"' src="http://mysite/1.ogv" />
</video>