We Keep Coding

Playing Video in html / web browser

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.

Alternate ways of opening swf videos from IE

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..

HTML5 Player replacing Windows Media Player Plugin

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

MediaElementJS very buggy

Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.

The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.

video on Safari 6 slows down whole page when my javascript form is inserted into the DOM

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.