What possibilities are there for inserting and showing videos on a webpage that
don't require additional plugins or installations from the user and
can be used for other than the .flv format (.f4v, .avi e.g.)
At SO I found a few questions like this: stackoverflow.com[...], but they are only about .flv-players. Is that because there is nothing else?
I know there are many, many formats and no tool can handle them all. But is it at all possible to show any other than .flv formats without extra plugins? I have never found any.
Thank you.
Most latest technology is HTML5 with <video> tag
The <video> tag specifies video, such as a movie clip or other video streams.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Documentation
Now most of the browsers supports HTML5 so no worry of using + don't require additional plugins or installations
Check out http://www.longtailvideo.com/players/
It also has a wmv player: http://www.longtailvideo.com/players/jw-wmv-player/
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 a video running in the background of my website. It's HTML5 with a jpg fallback.
I use this HTML
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="video/nieuw.mp4" />
<source src="video/nieuw.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="video/nieuw.ogg" type="video/ogg; codecs=theora,vorbis" />
<img src="img/bg1.jpg" alt="bg" />
</video>
I have fiddled around with the sequence of these <source> files, and I have fiddled a lot with converting tools. I used MIRO convertor, VLC, iMovie etc.. etc...
But I always end up with at least one browser that doesnt show the movie, for example Safari on Mac desnt work, all other browsers do. Or All browsers but windows / Chrome doesnt work. And it's driving me mad.
Can you guys please post your best practices? What sequence of html5 code do you use, and which program / settings do you use to convert the movie?
Thanks a lot!
It's 2016, MPEG-4/H.264 video format has won the battle, you can drop webm and ogv http://caniuse.com/#feat=mpeg4
Convert with AWS Elastic transcoder
The best way to do is integrate any player(like jwplayer) as the video tags are not supported by all browsers and convert all videos in one common format at time of upload as per your player support using any library like ffmpeg lib.
http://www.w3schools.com/html/html5_video.asp
Codecs are beyond the scope of the w3c specification. Zencoder has a pretty good blog post about this exact issues here:
https://www.brightcove.com/en/resources/blog/what-formats-do-i-need-for-html5-video/
Ok, I got it working in every common browser, with a fallback for the olders ones. I used VLC to convert the files, and used the HTML below:
<video id="video_background" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="video/pr6.mp4"></source>
<source type="video/webm; codecs=vp8,vorbis" src="video/pr6.webm"></source>
<source type="video/ogg; codecs=theora,vorbis" src="video/pr6.ogv"></source>
<img alt="bg" src="img/bg1.jpg">
</video>
I'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<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>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.
I am familiar with html4 but not in html5. I am starting to learn. But I am sticking in video and audio tags.
for video tag I have written like:
<video width="320" height="240" controls="controls" style="border:2px solid #ccc;">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.wmv" type="video/wmv" />
Your browser does not support the video tag.
</video>
where as code for audio tag is like:
<audio controls="controls">
<source src="Kalimba.ogg" type="audio/ogg" />
<source src="Kalimba.MP3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
the video file "Wildlife.wmv" and audio file "Kalimba.MP3" are on the same folder where the above html file is present.
Also I confess that these types of code I got from http://www.w3schools.com/html5/html5_video.asp though I did not understand what is the need for writing source tag twice with different extensions.
Well, it's for fallback, webkit browsers only support a certain type of files, while gecko based browsers (like Firefox) only support a different kind. So it's there to accommodate the difference between the browsers and allow all of them to display the file corretly.
If I may suggest, don't go to w3schools for information. It's a generally bad and misleading site.
I know that object tag embeds objects in html and useful for playing videos/audios.
When we specify object with type="video/mpeg" does this use the default player in the device
I am having an issue in playing mp4 files. When i use object tag.
It is able to play mpeg-2 transport stream though.
Also the device player specs says they support mp4.
Am i missing anything here.
You might get help from this website mentioned in this answer to a similar question.
Edit:
html object tag has some limitations like the other tags used to play videos. I think this will give you a more clear idea. There you'll see that the best solution is to use 3 different methods together like this:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>
In this example, The HTML 5 video element tries to play the video either in mp4, ogg, or webm formats. If this fails, the code "falls back" to try the object element. If this also fails, it "falls back" to the embed element.
And the easiest way to display videos in HTML is to use YouTube.
Anyway, you'll understand it better if you read the whole thing there.