Recently I started a college project where I would have a video as a background on my HTML5 index page. I had it working perfectly with a stock video but when I made my own video and converted it to .mp4, .ogv and .webm all I get now is the blank black screen. I see no fault in the code:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">
<source src="backgroundvideo.webm" type="video/webm"/>
<source src="backgroundvideo.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/>
<source src="backgroundvideo.mp4" type="video/mp4"/>
Video not supported
</video>
Could it be the movie converter I used? I used Miro Video Convertor.
Provided the videos are stored in the same directory as the HTML, and you have the filenames correct, this should be fine. If you've tried it in several different browsers (I assume you have) then, yes, it's probably the video encoding.
Related
I have a video tag in HTML5 to show the resources from a mobile app. The users can upload any kind of video with their devices.
This is the tag:
<video width="100%" controls autoplay onended="closeVideo(this)">
<source src="route.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="route.mp4" type='video/webm; codecs="vp8, vorbis"'/>
<source src="route.mp4" type='video/ogg; codecs="theora, vorbis"'/>
Your browser can't play this kind of video, sorry.
</video>
Most of the videos work properly, but a few of them display the sound but no the image.
The problem is not in the files, because they work properly if downloaded in the computer.
I can't figure out a pattern in the videos that doesn't work, they have different formats, sizes, proportions and fps.
Thanks for your answers
I recommend using a transcoding service (SYNQ.fm, Encoding.com, Amazon Elastic Transcode, Zencoder) to convert the videos that your users upload, this way you can guarantee they will play properly (assuming a video that is uploaded is not corrupt or created with an unknown video codec) since you cannot assume users will upload videos that are already compatible for playback on all the various mobile devices and browsers available. Thus, your code would look something like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Where the mp4 file you provide is encoded with H.264 codec and the ogg file provided is encoded with the Ogg codec. In terms of transcoding, I recommend that the video files that are uploaded to your system are transcoded into mp4 and either webm or ogg. This will also help make your app more reliable in terms of playback and since you define the video outputs you will get consistency instead of different dimensions, fps, codecs etc.
Here is some documentation that can help: https://www.w3schools.com/html/html5_video.asp , this will also tell you what browsers are compatible with what video codec as well as what browsers support HTML5 video.
I have looked everywhere online to try and solve this issue.
I have got the following code on my website which works fine on all browsers apart from Microsoft Edge, it simply says that the content is not supported, so it is recognising the video tag.
I'm displaying an MP4 video, codec: H.264, AAC
<video width="100%" controls id="slider-video">
<!-- <source src="img-src/{v2_FOLDER}/theme/GMS_Final.webm" type="video/webm"> -->
<source src="img-src/{v2_FOLDER}/theme/GMS_Final.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<p>Your browser does not support the video tag.</p>
</video>
As you can see, I have even tried using an webm but this also doesn't work... any ideas?
Updated Code:
<video width="100%" controls id="slider-video">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.webm" type="video/webm">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.mp4" type="video/mp4">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.m4v" type="video/m4v">
<source src="http://devsite6.clickserverdev.co.uk/img-src/_themev2-germanmotorspecialist-1131/theme/GMS_Final.ogg" type="video/ogg">
</video>
Make sure to use the correct MP4 compression with H264 codec (maximum 720p of resolution) with AC3 audio on it.
Edge is like browsers on iPad/iPhone and needs the same H264 compression style.
Drag and drop your mp4 video file to IE-Edge to play it directly from local file system. So you will be sure if your video correctly converted.
I'm trying to create a html5 videoplayer on my site, but if when I try to insert the file like so:
<video width="320" height="240" autoplay>
<source src="gevelreclame.mp4" type="video/mp4">
<source src="gevelreclame.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
it doesn't work at al, I have another video file (also mp4) which just works when implemented in the same way
EDIT
both the files are not working now, i've changed only the filenames and they just don't work anymore..
I can paste a live-streaming URL in VLC and it plays. Here is the media information provided by VLC:
The URL is of the format http://***.flv I am assuming this is FLV container. But I can only guarantee what I see in the screenshot above.
It is possible to embed this live streaming video in HTML which will work on modern Chrome and/or iOS/Safari devices?
This is the code I tried:
<video controls id="video" width="320" height="240" preload autobuffer >
<source src="http://***.flv" type="video/mp4" />
</video>
In Mac/Chrome this only attempts to download the "whole" file. Of course, the file is infinite, so this will never actually play.
Take a look at videojs, you can use it to stream flv because it mimics the video tag. The following example allows to stream a rtmp live feed inside a html5 video tag.
<video id="myvideo" class="video-js vjs-default-skin"
controls preload="auto" width="320" height="240"
poster="yourposter.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.