GOAL
FLV Video files being served by Wowza Media Server to be played on all devices, platform/browser independent. I'm currently working with a player loaded with AJAX which uses VideoJS.
WHERE IM WORKING
http://activemd.net/html5/
THE CODE
It seems like you have to provide 3 different types of videos for HTML5, so my approach is trying to have Wowza transcode them to the 3 types.
<video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" width="432" height="300" poster="amd-poster.jpg" autoplay="" data-setup="{}">
<source src="http://74.208.104.107:1935/riverview/mp4:ri_martino.flv" type="video/mp4">
<source src="http://74.208.104.107:1935/riverview/webm:ri_martino.flv" type="video/webm">
<source src="http://74.208.104.107:1935/riverview/ogg:ri_martino.flv" type="video/ogg">
</video>
PROBLEM
My videos won't play, anywhere. When I use http versions of the videos, my player plays them without a problem.
WHAT I HAVE TRIED
An example from the StackOverflow post at: Wowza, iOS and HTML5 video tag
An example from the Wowza post at: http://www.wowza.com/forums/content.php?35-How-to-set-up-video-on-demand-streaming
QUESTION
How can I get my FLV videos to be streamed to all devices, regardless of platform or browser?
Am I going about the whole transcoding approach incorrectly?
Thanks.
Rick
WebM & Ogg are not supported for Video On Demand (VOD) application. You must convert the file to MP4.
You can also use JW Player which is a Wowza supported 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.
If you look at my web page you'll see that the top video (medieval guy with red nose) plays perfectly, both video and audio.
But if you look at the bottom (2nd) video, when you play it, there is only audio. The "video image" you see is actually not the video itself, but a png utilizing the "poster" html tag.
Here is the html for both videos:
<video src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" poster="http://shapeshed.com/examples/HTML5-video-element/images/posters/les.jpg" controls="true" width="320" height="240">
Your browser doesn't support the video tag. You can download the video here.
</video>
<video src="videos/Play.mov" poster="videos/Play.png" controls="true" width="800" height="600">
Your browser doesn't support the video tag. You can download the video here.
</video>
The 2nd video is the one I care about, but I cannot get the video to work in Chrome -- it only plays the audio. But on Mac Safari the video works fine. Am I doing something wrong? It seems I'm implementing my 2nd video exactly the the 1st video. Why does 1 work and 2 doesn't?
EDIT: I got further along, but now in iPad only (Chrome works, iphone works) I get video but no audio. Any ideas?
EDIT #2: I need my 2 videos to play correctly on Apple Safari -- nothing else matters, because all users besides Apple devices will be seeing Youtube-embedded videos. Can anyone tell me exact steps to convert AVI to a video format guaranteed to work in Apple Safari?
Your video is encoded with MPEG-4 Part 2 video and AAC audio. MPEG-4 Part 2 video is not supported by Google Chrome. Unless you manually install additional codecs, the only video codec supported by both Safari and Chrome is H.264 (also known as MPEG-4 Part 10, or MPEG-4 AVC). If you re-encode as H.264 it should be placed in a MP4 container with AAC audio and a .mp4 file extension (not .mov).
Web video is complicated, most browsers support different video formats (codecs). To be compatible with all browsers you need every video in 3 different file formats: MP4, OGG, WEBM.
For maximum compatibility, here’s what your video workflow will look like:
Make one version that uses WebM (VP8 + Vorbis).
Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
Make another version that uses Theora video and Vorbis audio in an Ogg container.
Link to all three video files from a single element, and fall back to a Flash-based video player.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
Source: http://diveintohtml5.info/video.html#what-works
You might want to try something like this:
<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 or MP4 with H.264.
More help here html5 video
Different video types support different browsers. You can convert your videos in HTML5 format using some software like DVDVideoSoft Free HTML5 Video Player And Converter or any other. In second video you are using mov video which only playing audio.
I am trying to make a video streaming site and I want to use VLC to play my video. However, I want other people who doesn't have VLC to be able to view my videos through a VLC plugin. Is it possible? I want to use VLC because it can play anything.
The viewer has to have VLC and the Browser Plugin Installed on there pc, depending on the file format of the video you could use the HTML5 Video tag.
<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.
Update your browser.
</video>
This will only work if the viewer has a html5 ready browser meaning old versions of IE wont be able to see the video but the code will tell them that they have to update there browser
You might want to checkout the current beta of http://www.projekktor.com - it's a generic HTML 5 player, which uses whatever backend is available on the user's PC. Since recently, it also supports VLC: https://twitter.com/projekktor/status/354187957571297281
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'm using video.js to embed videos with HTML5 and the video simply plays too fast. I press the play button and I can tell it's at least 1.5x the proper speed.
Any ideas?
EDIT: Sorry! No code. Here you go. By the way, it's copied from videojs.com itself.
<video class="video-js vjs-default-skin" controls
preload="auto" data-setup="{}">
<source src="http://foo.bar/wp-content/uploads/date/video.mp4" type='video/mp4'>
</video>
No webm video for now, I'll work on converting the mp4 to that later.
Also, I'm using this in WP; the admin posts videos that we uploads. No video width, height, poster, or id defined.
Most likely your video is not properly encoded to be compatible with web browsers.
How did you get the video file in the first place
Where does it work
How did you preprocess it for web