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
Based on this page on w3schools I don't see any mention of Javascript being needed to play HTML5 videos on recent browsers.
https://www.w3schools.com/html/html5_video.asp
Yet, when I disable Javascript on Safari, I can no longer play Videos embedded on my webpage via Tag. I even disabled lazy loading on a test page to see if that helped, but it didn't.
My primary concern is visitors on Mobile devices so falling back to flash is not an option.
hence the question, Is Javascript needed on fairly recent browsers ? what are best fallback options without requiring any plugins ?
like, using to provide direct download of Video, etc ?
javascript is absolutely not required to play the video in html5
the w3 video is not playing because it is rendering that part of the dom using js and also video is not local it is brought by anchor tag
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 embed tag containing youtube video.
However this does not play on mobile browsers as it says flash required.
I am using HTML and not HTML 5 since my app should support IE 8 too.
I browsed through some awesome JQuery solutions but got only HTML5 based Jquery solutions
Can someone suggest me good solution to have my youtube video play in IE8+ , Chrome , FF+ and mobile browsers too.
This embed code youtube provides by default will work for HTML5 browsers (mobile phones) as well as old browsers that need flash:
http://jsfiddle.net/austinpray/G5GhH/1
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
As best I can tell by looking at the iframe's code, this code sniffs the capabilities of what your browser can play and displays what works best. If you are on browser that has flash capabilities it uses flash and if flash isn't available it defaults to HTML 5. I tested this and it works on iPhones and Android phones. Here is the Youtube support document.
I know it is not right out of the box, but is there a hack anywhere that uses javascript, php, or even flash to play the MP4s if the html5 video tag isn't supported?
Yes, there are several frameworks / plugins.
http://videojs.com/ for example provides good fallback.
It basically detects if HTML5 video is available and if not, it uses a provided flash player automatically. To change the order of used engines, you can set the option:
_V_.options.techOrder = ["swfH5"];
which will use swf before HTML5
The compatibility chart has a list of all browsers/technologies available for playback.