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>
Related
I work in a museum, our website has many .MP4 videos. I changed their extensions to .MUS to make them more difficult to download (most people don't know how to right click the webpage, click the <video> tag to download it and then rename it). Videos show fine. It looks like this :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='dinos.mus'> ◄█■■■
</video>
Now I moved the videos to a protected directory outside WWW, then I use PHP to read them, like this :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=dinos.mp4'> ◄█■■■
</video>
And this is open_file.php :
header( "Content-Type: video/mp4" );
readfile( "/home/" . $_GET["file"] );
It works fine... until I change the extensions from .MP4 to .MUS, then the videos are no longer shown :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=dinos.mus'> ◄█■■■
</video>
I don't understand why : it's the same file, I send the proper header with PHP, the <video> tag has the proper type. Actually, without PHP the <video> tag works fine with the .MUS files, so the problem seems to be PHP.
My question is : how can I read the .MUS files and send them to be interpreted as MP4?
I have tested your code, the Content-Type: video/mp4 and readfile should work (it should not be related to the file extensions, imagine if you get the file data from a BLOB, it should also work)
But just if the home directory is relative ,then please use "./home/" instead of "/home/"
and
make sure that the directory / file permissions are set properly. Say make sure the home directory is EXECUTABLE (chmod a+x for home directory) and the mus files are READ-PERMITTED (chmod a+r for the MUS files)
So this open_file.php works:
<?php
header("Content-Type: video/mp4");
readfile("./home/" . $_GET["file"]);
?>
See a working example here:
http://www.createchhk.com/SO/testSO20Nov2021b.php
code as follows:
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=test2.mus'>
</video>
This wouldn't really protect the file. You could protect the file by hosting it on another server, buffering the video, and then renaming the file for the next user, effectively deleting the file until it gets reloaded. This would take a while to code though.
A different way to do this though, would be to use blob urls. These are what YouTube uses and it stops people from easily finding the video URL.
You can use the PHP code below to do this:
<?php // php at top of page
$video = file_get_contents('./location/to/file/from/page.mp4');
$video_code = base64_encode($video);
?>
Then, where you have the video file, you can do this:
<video width='640px' height='480px' controls='controls' controlslist='nodownload' />
<source type='video/mp4' src='<?php echo $video_code; ?>'>
</video>
If anyone tries to grab the video URL and open it, it will tell them that the file has been moved. They also cannot download the file. I would also recommend adding oncontextmenu='return false;' to the video for a bit more security.
I think the MIME type for .MUS files is application/octet-streamheader( "Content-Type: application/octet-stream" );
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.
in video tag src we are trying to give src as a ftp resource its not picking it up. Can somebody give some direction on that.
<video src='ftp://server/pqr.mp4' />
I suspect that's because to allow efficient usage, the browser makes HTTP range requests, which are part of HTTP, not FTP. FTP is a pretty old protocol, and isn't really appropriate here for lots of reasons (no range requests, basic/no caching info, etc).
something like this
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
<source src="http://movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The issue here is :
Loading an FTP sub-resource through an HTTP / S page is not allowed
This is for security issues, see https://bugzilla.mozilla.org/show_bug.cgi?id=1361848
Use this code:
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
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/
I have 100 training, lecture, guide video files which has size 30MB to 1GB each of them. And they are all .mp4/mpg format. There is no web player i have found to play it in the inline html.
So this is what i am doing now let them download it. But i am looking for a way how to play those files using a web based media player so that the quality is not drop and it looks like same page without target="_blank", but with iframe?
Current code is like this:
<a href="/1/720p.mpg" target="_blank">
<img src="/img/icon/playivr.png" style="border:0px;">
</a>
<a href="/1/1080p.mpg" target="_blank">
<img src="/img/icon/playivr.png" style="border:0px;">
</a>
You could try use object tag for that:
<object data="data/test.mpg" type="video/mpeg" width="320" height="255">
<param name="src" value="data/test.mpg">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : test.mpg
</object>
But this will work only if user have a plugin.
The better way would be to convert videos to flv format using ffmpeg for example and play using some flash-based player. It's better since flash in installed on about 99% of computers.
Google chrome latest version supports HTML 5 tag "VIDEO"
<video width="1024" height="768" controls="controls">
<source src="file:HaveFun.mp4" type="video/mp4" />
</video>
Latest firefox browser supports the "video" tag but is unable to play mp4 files.
you can convert them to swf and run them as a flash or upload them to youtube then do the embedding thing. or be creative and use FLASH software and do your own player.
there is this Quick time thing but its isn't nice at all