I am working on a script called HOME (view it here)
Now i'm creating a video player and used html5 for it but it wont load the video. Its just black. Here is my code.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264">
<source src="/uploads/videos/1.mp4" type='video/mp4' />
</video>
Im using google chrome.
After doing some research it seems that google chrome and firefox doesnt support mp4 videos but support other formats. So i will have to change the script to upload and maybe convert the video to other formats. Source
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 have an MP3 audio stream contained in an .m3u8 file delivered through CloudFront. This is successfully used by apps to play audio, but I'm trying to play this in a browser.
I have tried the basic HTML <audio> tag, and more sophisticated implementations like videojs. In all cases, the audio plays fine in Safari, but will not play in Chrome or Firefox.
Using video.js:
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"liveui": true}'>
<source src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8" type="application/x-mpegURL"/>
</video>
<script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
</body>
HTML:
<audio
controls src="https://d1q1pwal4ma0iv.cloudfront.net/playlist.m3u8">
Your browser does not support the
<code>audio</code> element.
</audio>
Does anyone have any theories as to what it is about Chrome and Firefox which means it does not play there?
Video.js does not support mp3 in HLS. HLS with acc would work.
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.
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.