In the code below I am playing a 60 second fragment from a 30 minute MP3 file (#t=60,180 - starts at 60 seconds, stops playing at 180 seconds). This uses the Media Fragment URI specification.
The HTML5 Audio player however show the progress bar with the full 30 minutes duration.
Three Questions:
1) Apart from hiding the progress bar completely, is there a way to only show the three minutes I want in the progress bar. (Letting people fast forward & rewind but not go beyond the three minutes?)
2) Is there a way to only stream these three minutes rather than having to start loading in the entire MP3 file and wasting bandwidth?
3) If (1) is the only option, how do you hide the progress bar and also the total time length variable?
<figure>
<figcaption>Test Player</figcaption>
<audio
controls
src="/test.mp3#t=60,180 id="stream" style=" width:500px;>
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
The only way you could potentially achieve something like this is by using Javascript. However, the "duration" attribute is read-only and cannot be modified.
The best thing to do in this case would be to edit the audio file and cut the 3 minutes you want by using an online tool or a program like ffmpeg.
You can hide the controls bar by simply omitting the 'controls' attribute from the audio tag. e.g.:
<audio autoplay="" name="media"><source src="/test.mp3" type="audio/mpeg"></audio>
Related
I have a database that contains metadata about some videos on my site. One of the things I store is video length which is often a decimal. When I query the database I will round the seconds value so videos that are 10.543 seconds display in a list as 11 seconds. However I've noticed the default html video player will show the video as being 10 seconds when the video loads. I could just floor the true video duration time but I would bet a video that is 10.998 would display as 11 seconds in the default html player.
I'm having trouble finding documentation on what the thresholds are for rounding when it comes to displaying video time durations. And do they change browser to browser?
Its probably not a rounding problem. It's probably a source of truth problem. There is not a standard way to measuring a video duration. Often in a video file there are two or three durations encoded, which can be combined in different ways. For example if you have 10 seconds video, and 11 seconds of audio, but the audio starts 1 second after the video starts what is the duration? 10 (the video track) 11 (the audio track) or 12 (the start of the video track through the end of the audio track)?
Some file formats may encode a duration into the medatadata, which can be calculated using any method, or could even be completely wrong. And the player that reads the file, could choose to ignore the metadata, and calculate it own duration.
And yes, every browser will do it differently for each format.
I'm running a large, batch-processing page that takes anywhere between 1 and 10 minutes to load. Once the page finishes loading, I click Refresh to reload the page and do it automatically for the next batch. The whole process takes between 50 and 100 clicks, and sometimes up to 3 hours (don't ask, seriously...).
As I'm waiting so long, I set up the page to play an alert noise when the page loads. I put this in the body of the page:
<audio controls autoplay style="visibility:hidden;">
<source src="http://mysite.com/ding-dong.mp3" type="audio/mpeg">
</audio>
It works great - but only when the tab has active focus. If I'm browsing elsewhere on the web, whilst waiting for the page to load, I'd still like to hear the alert when the page finishes loading.
Is this possible using the HTML5 <audio> tag?
Thanks!
This is disabled because of performance and power saving policy from version 46, see more in the code review, but from version 47 you can switch this chrome tag #disable-gesture-requirement-for-media-playback. I've tested this on version 53 with success.
Assuming we record some video from media server in Append mode.
How do We make JwPlayer (or another video player) seek and play to always (Let's said) last 5 seconds of Video which being recorded?
Thanks,
I have a webpage with multiple tags, such as:
<audio controls="controls" preload="metadata">
<source type="audio/mpeg" src="file1.mp3"></source>
</audio>
Each tag plays a different file, and each mp3 file is fairly long (i.e. they take up to a minute to be fully downloaded).
If I have more than 4 tags, only the first 4 will be displayed in IE9. The other ones will be displayed one by one, each time one of the first 4 audio players has finished loading its audio file.
In fact, clicking on any hyperlink in the page doesn't load the appropriate HTTP resource until one of the audio players stops loading. It seems as though the audio tags set a hard limit on the number of simultaneous HTTP connections. IE9 usually has a much higher limit, so this seems strange.
Other things to note:
the audio files load and play fine by themselves
I don't need to files to be played simultaneously, I just want to have a page that shows multiple audio players for different files
I tried using different values (none | metadata | auto) for the preload attribute. 'none' hides the audio players completely in IE9,
and metadata and auto show the same problem.
this answer mentions that up to 40 players in IE9 should be okay, but I can't get beyond 4?
Any thoughts are appreciated, thanks.
Indeed there are some glitches with IE9 when the preload attribute of audio tag is set to "metadata".
Possible workaround for more responsive behavior will be:
Setting preload = "none"
Wrapping <audio> tag with an image or div with a background image
Attach "click" event to the image/div which will trigger: document.getElementById('audio1').play()
Hope it suits your needs.
I have the following HTML5 video tag:
<video id="vid" controls="controls" preload="metadata">
<source src="/testvid.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>
As soon as the video is clicked, Safari begins downloading the entire video file and does not stop until it gets to the end. The video file is 400 MB, so this is a problem due to the cost of the bandwidth.
It does not seem to be a problem with the location of the index in the file, as the app at http://renaun.com/blog/code/qtindexswapper/ says the index is already at the start, and the start of the video is playable immediately even though the rest is still being downloaded.
The source file is in Amazon S3, and so the server supports range requests.
Is there anything I can do? Ideally I would like some sort of sensible buffer, e.g. 20 MB of content ahead of the playhead, or 1 minute, or something like that.
The normal behaviour is that a small portion of the video is downloaded when the page loads (just enough for the browser to display a frame and to get the file headers). When you play the video, the whole video is downloaded while it plays.
In some older versions of browsers, the video downloads again if you use the seek bar.
There is no setting or attribute you can use to change this behaviour.
Source: http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/
I agree with Sohnee. To lower your bandwith you have two options:
compress your video to a lower quality, or what's your videosize/bitrate ( f.e. h264 with 427x240 800kbps i end up with approx. 5-6mb/min)
think about a playlist (guess southpark.de is doing it like that), cut your movies into several parts and if video is on end, load next one into player. disadvantage: if you use custom controls, they only show infos of current video and not the whole (could be solved if you build your custom controls with special magic).
don't know if it helps, but this would be my two solutions in this case. best K