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.
Related
I tried this code but video is just continuing to load, not to playing.
I also tried video codec H-264 but that is not working.
Next I tried to convert mp4 video to webm but that did not help either
Can anyone tell me how to do this using jquery and ajax?
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Did you checked by drag and drop to open the movie.mp4 or the movie.ogg file?
If the file does not work by simply opening it using a browser, it might be the file's problem, not the code or the browser.
For the file type support per browsers please refer the "Can I use?" pages:
MPEG-4/H.264
Ogg/Theora
I'd like to load and play a smaller HEVC-encoded video on web browsers with support for it.
I'm using this code on Safari 11 (macOS 10.13), which has support for the HEVC format.
<video muted playsinline autoplay>
<source src="clip.webm" type="video/webm; codecs=vp9">
<source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="clip.mp4" type="video/mp4; codecs=avc1">
<p>Video not supported</p>
</video>
In Web Inspector > Network Panel, I see that Safari loads both clip.mp4 and clip-hevc.mp4. If I inspect the video element, I see that clip.mp4 is playing, not clip-hevc.mp4. I see the same thing on iOS 11.
When I call HTMLMediaElement.canPlayType() on the types I specified, I get
maybe on video/mp4; codecs=hevc
probably on video/mp4; codecs=avc1
Nothing on variants of the HEVC codec I've seen (e.g., hvc1, hev1)
Something else I noticed: When I remove the clip.mp4 option, clip-hevc.mp4 downloads and plays just fine!
How can I make sure that only the best supported MP4 variant downloads and plays in the browser?
FYI found in iOS14 type="video/mp4; codecs=hevc" doesn't work anymore. type="video/mp4" and type="video/mp4; codecs=hvc1" does
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.
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/