I have some videos (H.264) cannot be played on mobile browsers but can be played on desktop browsers. I use the same browsers (Chrome, Safari) on both desktop and mobiles. However the video control on mobile browser is blank and seems like the video is not loaded correctly.
I am really confused about this issue, and the code I use is really simple:
<video controls style="width:100%"><source src="" type="video/mp4"></video>
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.
We have a website that has audio-video content in the format of .swf files.
There are thousands of active users on the website.
The problem that came up is that some of the new browsers these days do not support Flash.
Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download itself.
We cannot ask all of our users to use Chrome or try other browsers. We also cannot convert swf files to HTML5 supported videos.
Is there any way that we can implement so that these files will play in browsers?
PS swf files are not working in IE 11 on Windows 7. But they are working on IE in Win10.
Here's an example code we are using-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align="center">
<embed src="http://www.w3schools.com/tags/helloworld.swf" quality="high" width="400" height="300" name="movie" align="center" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/go/getflashplayer" />
<param name="movie" value="http://www.w3schools.com/tags/helloworld.swf" />
</object>
I noticed the .swf link is from W3Schools.com... Their example page shows code to embed an SWF and for me it works fine on IE 11 using a Win 7 PC. The code is basic...
<!DOCTYPE html>
<html>
<body> <embed src="helloworld.swf"> </body>
</html>
"Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download
itself."
It auto-downloads because it's an unknown file type to IE, so it's hoping maybe you know some program to run this filetype X if it just d/loads for you.
Internet Explorer uses Windows' own ActiveX for running web plugins. It's a Microsoft technology so likely your end-users assume that just having the Flash plugin installed in their Chromes or Firefoxes is enough. Nope. On PC there are two versions of the same plugin (one for IE only, and another version for all other browsers).
How to fix this?...
Using the IE browser itself, go to : https://get.adobe.com/flashplayer/
That page will auto-detect browser & check Flash existence (offers link to correct version for IE).
Alternatively just choose "IE (Active-X)" from the drop-down list here : https://get.adobe.com/flashplayer/otherversions/
Final note...
If these are just slides why not just export as images and just display pictures with audio in a web page (this way it would display on mobile browsers too)?
<img src="slide1.jpg" />
<audio controls src="track1.mp3" />
Just a basic example for a slide1.html. The next/back buttons would just be links to other pages like slideX.html etc.
Or even try web-searching a "powerpoint to html online converter" tool. One example is this conversion site. I've not tested but it may help you.
"These swf files are actually created from PowerPoint slides and Audio using ISpring(ispringsolutions.com/ispring-converter)."
I guess this supports advanced effects like transitions etc? So why not export as HTML5 option? Unless you feel SWF gives better content protection...
Good luck whichever way you go..
I have embedded a video in HTML5 webpage using the <Video> tag. and also i have added the <track> tag for subtitles.
The video is working perfectly fine in almost all major browsers, but the Subtitles are not working. I know that major browsers doesn't support this.
Is there is any workaround which can show the subtitles in all browsers. Kindly help.
Captionator is a polyfill for the <track> tag.
Try flow player It will be help to show subtitle and support to all major browser with video tag supported extension.
http://flowplayer.org/docs/subtitles.html
https://github.com/flowplayer/flowplayer
You can edit flow player design by below link configuration
http://flowplayer.org/designer/
Look on captionatorjs
http://captionatorjs.com/demo.html