After researching many topics and different fourms I feel at a loss. I understand the answer may be simple but i'm just not seeing it. So without further ado here is what i have going on.
I have a locally hosted webpage that currently if loaded in Internet Explorer plays audio files (WAV format) through Windows Media Player Plugin. Being that Internet Explorer has been removed from 98% of our computers I am looking to make this page more accessible to the users. Therefore my idea was to code a HTML5 player using the audio tags directly on to the page. Now comes the tricky part. The audio WAV files are being delivered to the user from a database.
I have been able to get the player to load by using the following
<audio controls="controls" id="player" type="audio/wav">
Your browser does not support the audio element.
</audio>
and then I modified the code on the audio file to
<span jwcid="#If" condition="ognl:item.recSegment.tape != null">
<button style="border:0px; background-color: transparent;" onclick="document.getElementById('player').play()"jwcid="#Any" src="ognl:item.recSegment.tape.Url">
<center><img jwcid="#Image" image="asset:play" alt="Play"/></center>
</button>
</span>
After making these changes I opened up chrome and nothing happened.
So then I opened up Firefox and when the button is clicked the player controls goes from paused to playing but does not load the file.
So for a final try I loaded up Internet Explorer on a laptop and when the button is clicked the player says "Error:An unkown error occurred".
I feel at a loss here and know it is something simple I am missing. Does anybody have any Ideas?
Nick
Various browsers have differing support for the various codecs. Even though everyone thinks of WAV as just WAV, there are different codecs for that as well as differing bit depths and different browser have varying support for it (Internet Explorer [IE] has no support for WAV).
Firefox won't play .WAV files using the HTML5 <audio> tag?
http://www.w3schools.com/html/html5_audio.asp
According to the Mozilla Developer Network (MDN) the most widely supported formats are MP3 and AAC/MP4:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility
Related
Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).
import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';
<audio controls muted>
<source src={sound1}></source>
</audio>
<audio controls muted>
<source src={sound2}></source>
</audio>
audio {
display: none;
}
In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.
When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.
My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.
Personal note:
On my 13-inch MacBook Catalina:
on Chrome both sounds work fine.
in Safari, sound2 works imperfectly.
on my IPhoneX:
on Chrome & Safari sound2 is sometimes audible later on.
EDIT:
In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!
Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.
I'm using a HTML5 audio tag to play the audio from the internet.
It's perfectly working on PC browsers and Android browsers.
IN IOS mobile browsers Volume control is not working,
Is there a workaround to correct this?
<audio #audioplayer [src]="audioUrl"></audio>
Different browsers supports a little different sets of media formats. It's possible, that iOS's browser don't support your audio format.
To add volume change support to iOS and not rewrite your entire app from html5 audio to web audio for that, you can combine these audio solutions via createMediaElementSource.
Please see more details at Mozilla website https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource
Is there a way to embed video in html that all browsers support - non html5, doesn't use the <video> tag, doesn't depend on flash - may be purely javascript?
Playback of video isn't just browsers supporting the <video> tag. Browsers should also have support for the codec, audio/video-container format (eg; MPEG) and possibly DRM. The previous suggestion (install Quicktime, VLC, even using Flash or MS Silverlight) take away this support by using some 3rd party component that runs outside of the browser, but still require a user to install and configure those components. Since those components are usually platform specific you would not really gain any extra browser-support, just a lot of complaints. You can forget about supporting mobile and tablet altogether.
Nowadays almost all platforms and browsers and have decent support for <video> and/or <audio> tags and codecs, container-formats and DRM. There are some nice libraries that take care of abstracting playback, DRM, the GUI and analytics and some of them have fallback to Flash.
Suggestions from Muthu Kumaran; videoJS and MediaElement.js, both open source, do take some work to get up & running. Other alternatives are
BitMovin, commercial. Pretty large, feature rich and expensive.
JWPlayer, open source and partially commercial. Comes from a Flash-background. Has very large userbase and has been around for ages.
TheoPlayer, commercial. Solid player, has been around for a while.
MeisterPlayer, opensource and partially commercial, new kid on the block. Looks promising with a few very large customers.
There are ways to play video without <video> tag or flash. But you need to install specific software to play video in browser like
Apple QuickTIme
You can use HTML to communicate with the QuickTime browser plug-in or ActiveX control when displaying QuickTime-compatible content in a browser.
https://developer.apple.com/library/content/documentation/QuickTime/Conceptual/QTScripting_HTML/QTScripting_HTML_Document/ScriptingHTML.html
VLC Web Plugin
The VLC media player webplugins are native browser plugins, similar to Flash or Silverlight plugins and allow playback inside the browser of all the videos that VLC media player can read.
https://wiki.videolan.org/Documentation:WebPlugin/
I wouldn't recommend any of these. You should simply use <video> tag to play video. There are many video library which has fallback support for older browsers like,
Video.js - http://videojs.com/ (dependency required for older browser https://github.com/videojs/videojs-flash)
MediaElement.js - http://www.mediaelementjs.com/
Cross-Browser HTML Video Code
Below is a sample of HTML you can use for video playback that supports the HTML5 video tag in modern browsers, but with nice video "fallback" code for older HTML4 browsers created the past 20 years.
<figure aria-labelledby="videocaption3">
<!-- VIDEO: The HTML5 'video' element is the primary source of the various video fallback elements below. Older browsers like IE 5-8 (using ActiveX) that do not recognize the 'video' HTML5 element will try and load the 'object' element version instead. -->
<video
id="video3"
controls="controls"
preload="metadata"
style="width:320px;height:180px;border:none;outline:none;"
title="My Video"
aria-label="My Video">
<!-- SOURCE: In this old ActiveX version, Microsoft Windows in Internet Explorer used the object ActiveX form while all other browsers used the 'embed' element below as fallback. -->
<source src="video3.mp4" type="video/mp4" />
<source src="video3.ogv" type="video/ogg" />
<!-- OBJECT: In this old ActiveX version, Microsoft Windows in Internet Explorer used the object ActiveX form while all other browsers used the 'embed' element below as fallback. -->
<object
id="object3"
name="object3"
data="video3.wmv"
type="video/x-ms-wmv"
style="width: 320px;height: 180px;border: none;outline: none;"
title="My Video"
aria-label="My Video">
<!-- EMBED: In this old version, non-Internet Explorer, older, non-HTML5 browsers would recognize this fallback 'embed' version element and call their plugins and players to display the file below. Additional fallback in the form of a 'noembed' element with alert text would trigger for those user agents that do not support multimedia or the embed tag (as it was never part of an official HTML release). I recommend you use this old syntax if you are supporting older browsers that do not understand the newer HTML5 elements. -->
<embed
id="embed3"
src="video3.wmv"
type="video/x-ms-wmv"
style="width: 320px;height: 180px;border: none;outline: none;"
title="My Video"
aria-label="My Video">
<noembed>-->
<!-- FALLBACK TEXT ALERT: If the user agent does not support video, give them a simple text alert below. -->
Sorry, your browser does not support this video.
</noembed>
</embed>
</object>
</video>
<!-- CAPTION: Captions wrap around the video elements the same as img, picture, and audio elements. -->
<figcaption id="videocaption3"><small>"My Video"</small></figcaption>
</figure>
Most browsers today will play video natively using the new HTML5 element. No plugin or player needed. If the browser doesn't support the "video" element, it falls back down to object (old IE), then embed (Netscape and non-IE) elements and will require a player be installed. Keep in mind this doesn't address the problem of what browser or version your user is using, operating system, movie encoding types supported, and what player types or versions they have installed (or not installed). There are too many variables that can shut down playback in older browsers. In addition, if your users do have a video player installed, each one may or may not support the video encoding types or version you offer, or on their specific OS or device.
I would start with supplying MPEG4 movies (widest support) first in the video element and encode other types. Add them to the code below to widen the chances you support all the operating systems, codecs, players, plugins, and browser versions out there.
I have an audio tag in my html and it works in chrome. However, I have trouble in FF ver.25.
The source is mp3 but I know FF is now supporting mp3 file. I also copy and paste the mp3 file path on FF address bar and it plays. It just doesn't work in my audio tag.
Symptom:
Audio control bar will appear 1 sec when page first loads but disappear right away. It works in Chrome.
codes:
this.audioElement = createElement('audio', {className:'audio',type:'audio/mpeg',
src:'test.mp3'});
this.audioElement.setAttribute('controls',true);
I can see the audio tag appear in developer's tool but for some reason it is hiding from the page and I am sure there is no dispay:none for the tag.
Can anyone help me about it? Thanks!
Mozilla's documentation on MDN indicates that this is probably an OS-specific problem. Specifically,
To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware.
The documentation then goes on to list Windows 7+, Windows Vista, Android, and Firefox OS as those OSes which support the audio tag. Do you happen to be using OS X or some other *nix flavor? I know at least on Linux, although Firefox is able to play MP3 files directly via Totem, the audio tag with just an MP3 source has the behavior you describe.
I'm actually developing a simple web site for the company I'm working in.
Every page has a central video, and every thing's fine on FireFox Opera Chrome and IE 9 BUT NOT with Safari 6.0.1 (Mac) neither with Safari 5.1.7 (PC) (it's OK with Mac Safari 5.1.2).
I've already tried to deactivate any other scripts, removed every video attributes, i even rewrote my scripts in a OOP way but ain't got any result at this point.
The fact is, as soon as i try to remove the mp4 source, the whole page runs perfectly.
Test site is visible here : http://www.jsteitgen.com/tests/
I've read a few posts in forums, about a Safari bug when accessing YouTube player. That might be the same problem but couldn't find any confirmation yet.
I wonder if anyone has experienced the same thing / would know something i don't about Safari 6 specifications / or even better : would have a solution !
Hope my English will be clear enough to get answers.
Taking a look on the code on the site which looks similar to the one on "http://drupal.org/node/1536226":
<source src='vids/animLogo.mp4' type='video/mp4' /><!-- Safari /iOs Video -->
<source src='vids/animLogo.ogv' type='video/ogg' /><!-- FireFox / Opera / Chrome -->
<source src='vids/animLogo.wmv' type='video/x-ms-wmv' /><!-- WIndows Media Viedo -->
There are 3 different video files being served. Of course, webm and theora are not supported on the versions of safari that are mentioned in the question, (SOURCE: http://weblogs.mozillazine.org/asa/archives/2009/03/open_video_in_s.html, http://farukat.es/journal/2011/01/488-google-h264-and-video-web, http://farm6.static.flickr.com/5285/5349294818_e6e32d42db_o.png) which prevents the ogv file from being played in safari, without additional plugins from the user (SOURCE: http://www.broken-links.com/2010/09/01/playing-webm-in-safari-with-plugins/, http://blog.andikurnia.com/2010/11/29/playing-ogg-files-directly-from-safari/). With further inspection, the .mp4 file is 3 times larger then the video formats being delivered to firefox, opera and chrome.
My suggestion is to optimize the .mp4 file to make the data being streamed alot less, since the embedded size (720x423) is smaller then the video's dimensions (1280x720), but that a matter of quality vs preformance of site.
Also, to answer your question, there is no youtube player, it mostly has something to do with video codecs and apple's implementation of it, safari does not have native support of Theora and thus, it resorts to the .mp4 verson unless codecs or plugins are avaliable to "decode" the file.
In short, the higher quality and slow video is being played. which needs to be compressed and optimized in order for the website to run a little more smoothly.