All geek questions in one place

Apache + HTML5 Video Tags - What Could Go Wrong?

[Cm. updates! - Works on Android / IOS browsers, but not elsewhere. FireFox, Chrome, Opera, Safari do not work. Although they are certainly HTML5 video tags ready]

Just try to transfer the video using the html5 tag. All I get is video player controls and nothing more. It is so simple, I assumed that it should just work:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Movie title</title> </head> <body> <video id="movie" preload controls> <source src="test.mp4" /> </video> </body>

So where can I go wrong? I tried a lot more than this little snippet. I tried fragments of examples of other nations. I tried many videos, many formats (mp4, flv, ogg). I tried to view it in Chrome, Firefox, Android Embedded, Opera, IE9.

I can transfer the file from the URL in programs like VLC, without any problems.

I'm starting to think that Apache2 may be the problem here, although I believe that I can pass the URL from VLC without problems, assuming Apache2 is not a problem.

Any help appreciated. I pull my hair here.

Update:

  • Whenever I try to access the URL of the video directory from Chrome, it seems to give me this error: the resource is interpreted as different, but ported with the MIME type undefined

  • This error, of course, is a server-side problem, should apache2 not have to be configured correctly somewhere?

  • If I access even the FLV file directory from the URL of my Apache2 server, it gives an error of this type MIME undefined. This is video management. Whenever I press the play button, it spammers the MIME type undefined several times.

Update2:

  • Checked that my .htaccess is readable

  • Added the following to my .htaccess:

    AddType video / ogg.ogv

    AddType video / ogg.ogg

    AddType video / mp4.mp4

  • Still not working, still see MIME TYPE undefined in Chrome.

Update3:

  • Firefox and other users can view URL / test.mp4 without problems, but NONE can work correctly with the video tag.

Update4:

  • Android can now use the video tag. Changing .htaccess seems to fix this. However, for some reason, no desktop browser can be.
+6
source share
2 answers

Firefox and Opera do not support MP4, and Chrome will soon drop support. It's also nice to add a WebM source.

Try adding the type attribute to the source declaration:

 <source src="test.mp4" type="video/mp4">
+3
source

Here is my html code from my website www.pi-corp.net. This allows you to play all commercial browsers with a backup application.

 <div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' /> <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4 ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image" title="No video playback capabilities." /> </div> </object></video>
0
source

Source: https://habr.com/ru/post/905165/

More articles:


All Articles