I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I need to use a .wav format audio in my HTML code. I used the following code and test it on chrome.
<audio controls controlsList="nodownload"><source src="sample.wav" type="audio/wav"></audio>
But it's showing an empty audio file on my webpage over and over again and my chrome browser telling me to download that .wav file. How to solve that problem?
Your snippet works well, you can test it here (I made a copy and paste from your post)
http://87.106.127.248/wav.html
Use only well known combinations of sample rate/bit depth, i.e. 44.100/16 bit with browsers
For streaming purposes on the web (like in an audio tag) you should create copies of your audio file in .mp3 and .ogg format and use these for your website.
Then a typical audio tag which could be handled by practically all modern browsers would look like this:
<audio>
<source src="path/to/yourfile.ogg" type="audio/ogg">
<source src="path/to/yourfile.mp3" type="audio/mpeg">
</audio>
Super green on some of this stuff so I apologize in advance.
I want host video files on my website and have them play in the browser. Currently, when going to the hosted file it just downloads the .mp4. Is there a way to set up a folder of videos to play the video in the browser automatically instead of downloading? I'm trying to avoid having to maintain html and embedding videos. I'd rather just send a url to the specific video and the end user only play that video in the browser.
I have the files hosted on Domain.com. Ideally, I would send a subscriber a link like "www.website.com/videofolder/video_name.mp4" and that video would just play in the browser. Is there a way to do this without making separate html files for each video?
You will have to send an html wrap with the link, this:
<video width="320" height="240" controls>
<source src="url/to/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Otherwise you'll just be sending a file stream, hence the download you're seeing.
I will also recommend you to explain:
How you're providing the file to the browser (Hosting),
Are you using NodeJS, Flask, Django, NGINX, AWS S3, etc.
So other contributors have more idea of how to help you out.
Is it possible to play an Icecast stream using HTML5's AUDIO tag? The syntax I'm using seems happy enough with ShoutCast but not Icecast which I'm confused by. Also if I browse to a certain URL of an Icecast stream a browser window automatically displays the player (see last example).
Working ShoutCast example.
<audio src="http://107.182.233.214:8000/;listen.pls?sid=1" autoplay="true" muted="false" controls="true" volume="1.0"></audio>
Non working Icecast examples.
<audio src="http://91.121.59.45:8016/;stream" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
<audio src="http://91.121.59.45:8016/stream" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
<audio src="http://91.121.59.45:8016" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
Icecast stream URL which opens the player automatically in a browser.
http://91.121.59.45:8016/stream
Is it possible to play an Icecast stream using HTML5's AUDIO tag?
Yes, absolutely.
The only requirement is that the browser supports the codec that you're streaming in.
The syntax I'm using seems happy enough with ShoutCast but not Icecast which I'm confused by.
All these stream URLs with semicolons ; are for SHOUTcast only. SHOUTcast servers run their admin interface on the same URL as streams. They do user agent sniffing to determine whether the client is a web browser or an audio player. When web pages started playing audio many years ago, they needed a way to work around this problem so that browsers could get the audio stream. A stream URL with a semicolon in it forces SHOUTcast to ignore the browser's user agent and replace it with "MPEG OVERRIDE", which causes the rest of the server to return the stream.
Only ; is needed. The whole ;stream thing is just unnecessary stuff that was copied and pasted.
You can read more here: https://stackoverflow.com/a/38217135/362536
As for Icecast streams, all you need is this:
<audio src="http://91.121.59.45:8016/stream" />
(Unless of course you support multiple codecs, in which case you would use multiple sources.)
I have had a look at a couple of players like Flow Player, JW Player and a couple more but I can't get it to work exactly in PHP code.
Is there any way to play FLV within HTML Video Tags?
I know MP4 and OGG files will but the thing that I am working on will produce an FLV file.
You should look at video.js from www.videojs.com I have been using it streaming live video feeds. It mimicks the video tag like this:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Works very well for me.
You might consider using some other players that are able to play FLV files; Known browsers (Chrome, Firefox etc...) are not able to run FLV files untill or unless you use some kind of flash player.
If you are using PHP, you might want to use a flash player! Use Adobe Flash Player, don't be shy! YouTube and many other websites use it.
You can also try to stick to the flayers you have already tried.
You can convert videos to MP4 or format of OGG. So that every browser can play the video file using the HTML5 <video></video> tag.
But Remember: Each browser has its own limitaion for playing a video file; you can read browser support here: Mozilla Developer Network
Play it with Flash. I think it is the only way: http://css-tricks.com/forums/topic/how-to-play-flv-in-html5/
You can do it using flv.js or via MediaElement.js (that will use flv.js underneath), although the support is limited to FLVs that contain H.264 video with AAC/MP3 audio.
Use MediaInfo software or your favorite video player to check what codecs are used in your FLVs.
And if you have H.264 + AAC inside, you can also convert it to MP4 losslessly, without reencoding:
ffmpeg -i input.flv -codec copy output.mp4
Technically speaking the HTML5 video specification is codec/protocol agnostic so one could imagine support for flv files could be possible. Problem is: none of the major web browser has implemented it (probably because flv is a proprietary container from Adobe). You will need a flash component to play it back. Either one of the players you mentioned or if you are looking for a standalone free flash player try strobe from Adobe. You can try it here.
If you can produce .f4v files you may have success in renaming them to mp4 and then try and play them in an HTML5 video tag.