I have no choice but to play wav files directly in the browser (serverside encoding to mp3 isn't an option, unfortunately.)
What's the best way to do this? I'd really like to take advantage of the HTML 5 audio tag but my target audience includes many, many teens using IE6. As far as I'm aware flash isn't an option, but speedy playback really is critical.
Thanks.
Nowadays, the best way is probably just to use the HTML5 <audio> tag. In the past, you might have done it like this:
Background:
<embed src="bgsound.wav" hidden="true" autostart="true" loop="1">
On Click:
Play Sound
It's been a few years since the last answer. Embed tag was good but I had an issue trying to trigger it to play in JavaScript. New audio tag works well is most browsers.
<audio src="cat9.wav" preload></audio>
You can trigger it manually with audioElement.play()
<audio controls="controls"><source src="http://blablabla.com/hghghgh/my%20file.wav" type="audio/x-wav" /></audio>
Due to unfixed bug (issue from 2012 year?) sometimes Chromium-like browsers cannot play .wav from redirected URLs because they "think" that file size is zero. But .mp3 is OK.
Opera 12.14 and Firefox play from < audio >
tag normally in the same case (redirected URL).
I tried JPlayer's 2.9.* lib in Drupal 7 with 3 players, but not successful (was black inactive rectangle 300*14 pixels for each player).
Related
Here is my m3u8 file:
cat 8.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:YES
#EXT-X-MEDIA-SEQUENCE:1131
#EXT-X-TARGETDURATION:5
#EXTINF:4.950, no desc
1545049888215.ts
#EXTINF:4.950, no desc
1545049893218.ts
I serve it at as static file at http://104.248.205.68:31339/8.m3u8
I use mediaelemnts.js to run this hls video: jsfiddle
html:
<video width="240" height="160"
id="player1" src="http://104.248.205.68:31339/8.m3u8"
controls="controls" autoplay preload="auto" muted ></video>
js:
$('video').mediaelementplayer({});
It works fine on chrome mac os desktop. But not working on iphone 8+ (safari and chrome). No errors in the console. Video just not played, black screen. In the fullscreen mode of video - the same.
At the same time, if I find a random m3u8 on the internet and use mediaelemnts.js to play it, it works well on the iPhone (at least in fullscreen mode) jsfiddle 2.
So I guess something wrong with my m3u8 file since other m3u8s are runnable on the iPhone.
If I open network tab while loading the problem page on Iphone, I see it's downloading the files but not showing video for some reason.
Update
I checked on android: galaxy s5 and galaxy s9+ in chrome: both works.
Update 2
Zip archive with ts files and m3u8: http://104.248.205.68:31339/8.m3u8.zip
When inspecting the media files [1] it can be found that the PMT (Program Map Table) signals that there is audio in the stream, but there are actually no TS packets for audio (i.e. no audio data) present.
It looks like the player waits for the audio TS packets in order to build a common buffer for both, audio and video, and only then start playback. Since the stream lacks audio data that never happens. To back that up, you can use ffmpeg to remove the audio track from the media segments using the below command and find that playback would work once you do this.
ffmpeg -i 1545049893218.ts -an -vcodec copy 1545049893218-v.ts
Further, the reason this problem only manifests in Safari and Chrome on iOS is that in those cases mediaelement.js is using the browser's native capabilities to play HLS, instead of a JavaScript player (like hls.js) which is used on other platforms (e.g. Chrome on desktop) and is more tolerant to such problem cases.
[1] E.g. using http://thumb.co.il/ or ffprobe
EDIT:
While the above may be sufficient to make it work on older Apple mobile devices - I tested on iPhone 6 iOS10 - newer devices seem to be more restrictive. The official HLS Authoring Spec states
8.11. You MUST provide at least 6 segments in a live/linear playlist.
which does not seem to be a hard requirement on some iOS versions. However, to ensure it to be working on all versions these requirements should be met.
I did a quick test on iPhone X with iOS12 and found it would play if at least 3 segments are provided in the playlist by just duplicating the last segment entry.
I have been asked to use aif audio files on a website. I am using jplayer.
Would there be a noticeable difference using .aif?
Which browsers support .aif?
Would you advise using .aif for the web?
Would it mean I would need 3 versions of each track to cover all Browsers/OS?
Like so:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.aif" type="audio/aif">
Your browser does not support the audio element.
</audio>
Thanks :)
The most widely supported format currently is mp3, aiff is supported but you'd need to test target browsers to determine which offer support.
You might also consider SoundJS, a library I helped develop that lets you play audio across a broad range of browsers and devices using a single code base.
Hope that helps.
Check your own browser.
I could not find a comprehensive list like you have asked for. So this is the second best.
I want to play a video file from my web app. I use JSF. I want to know how we can open the video file with the help of any video player installed in the client's system. I know how to open a pdf file the same way. But I want to know how to open a video file.
There's no standard JSF component for this. It's however not different from as you would do in plain HTML. Just drop the video file in public webcontent (so that it's reachable by an URL) and use the HTML <embed> and/or the <object> element which points to the URL of the video file. That's basically all. Note that you can just use EL in template text. So e.g. <embed src="#{bean.videoURL}"> would work perfectly fine, as long as it generates the HTML code the way you intend (open page in browser, rightclick and View Source to see it).
The way how to create and parameterize the HTML <embed> or <object> tag in turn depends on the video format (MPEG, MOV, FLV, etc). You basically need to consult the documentation of the video format vendor for details how to use it. Since you didn't mention what format the video file is in, we can't help you further in detail. Googling the smart way should however yield sufficient examples. E.g. "embed mpeg in html".
PrimeFaces has however a <p:media> component which makes it all easier for developers who are lazy in Googling for examples and/or figuring the browser specific inconsitenties ;) It'll outright generate the right HTML code necessary for the provided video format.
See also:
How to stream audio/video files such as MP3, MP4, AVI, etc using a Servlet
This works in browsers those support HTML5.
<video controls="controls">
<source src="resources/myVideo.mp4" type="video/mp4"/>
</video>
I have three mp3 audio files that play fine in all browsers but play for only 1.x seconds in IE9 unless I change "controls" to "autoplay" in which case it plays just fine.
I was then sent the original, unedited file in .wav format. I encoded it myself to mp3 but have the same problem.
However, if I create my own mp3 audio file and insert it into the same markup, it works in all browsers, including IE9 with the "controls" attribute.
I can only think there is something about the settings in the original audio file that would cause the issue but don't have a clue what that could be.
Here is the test markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="poem.mp3" controls >
</body>
</html>
EDIT:
I put three audio files on the page. Sometimes one or two will play all the way through while the third won't play at all. Other times, two will play for a second but the third does nothing.
In case anyone is still dealing with this issue, I use the standard <audio> markup for mp3.
<audio controls="controls" preload="auto">
<source src="http://www.davehullthehullabalooer.com/help(5).mp4" type="audio/mp4"/>
<source src="http://www.davehullthehullabalooer.com/help.ogv" type="audio/ogv"/>
<source src="http://www.davehullthehullabalooer.com/help.webm" type="audio/webm"/>
<source src="http://davehullthehullabalooer.com/add-for-beatles-page-188.mp3" type="audio/mp3"/>
</audio>
In IE9: Internet options > Advanced Tab > Multimedia, I select "Play sounds in webpage"
All good!
EDIT: My fix didn't work. It still fails in IE9 but everything works still in every other browser.
An answer to my own question that solves the problem, at least, but I have not found out why.
I don't know why some mp3 files play just fine in IE9 but others, that also work well in any modern browser, won't play in IE9 using the markup I show above. I made audio play by adding the audio attribute preload="auto" and all is fine now in IE9.
Modern browsers do not need this. Why IE9 does, I do not know yet.
I was having trouble with audio controls showing on IE9 and found that IE9 struggles with the preload attribute. I didn't want the browser to preload all the files by setting them all to 'auto' but found that setting the preload setting to 'metadata' instead of 'none' did the trick. Could be an alternative solution.
http://helephant.com/2011/12/29/the-html5-audio-tag/ : "Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size."
Ran into the same problem, audio files would only play first second when preload is set to metadata on IE9.
Turns out that my API was gzip compressing all responses and IE9 was having trouble dealing with it. After removing gzip/deflate compression from audio and video files, IE9 was fine with it.
How can I add sound to a web site . I don't want to show .swf player in the page .music should play in the background
You can use the <audio> tag, but check if that is supported in all browsers you are interested in. If not, you can use an invisible swf.
But I'd recommend you not to putting background sound into the site, it tends to be really annoying.
Hide the div element inside which you put the swf object, in the page. Set the display state to none instead of block. Something Like :
<div style="display:none;">
<Your swf object>
</div>
It's old but it works.
9 Versions to play a sound on a web page
I've used version 8 "Using a Java Applet called from JavaScript" for firefox and IE8.