I currently have the following code for a Quicktime embed:
<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="564" height="346" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="spanishhb5.mov">
<param name="qtsrc" value="/UserFiles/Servers/Server_3218684/Media/spanishhb5.mov">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="spanishhb5.mov" qtsrc="/UserFiles/Servers/Server_3218684/Media/spanishhb5.mov" width="564" height="346" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/" scale="tofit"></embed>
</object>
This is working great in Safari and Chrome (on my Mac), but when I switch over to Windows it doesn't work in FireFox, Internet Explorer (8), or Google Chrome.
I think my embed code is incorrect or only recognized with a small percentage of browsers, can anyone help point me in the right direction so that my embed code works in the browsers I mentioned above?
Thanks,
Josh
Have a look at this article from Apple:
Using the HTML5 audio and video tags is the preferred way to include audio or video in a Webpage.
Things to consider:
.mov files are packed with a proprietary container from Apple. They should work well for Apple devices however it could struggle on other platforms (it most of time requires the Quicktime plugin to be installed on the user device which is not always true on non-Apple devices). You better off transcoding to mp4 and webm for large device/browser coverage.
Using HTML5 video tag with a fallback (be it Quicktime or Flash - Flash being most popular on this area because it has a larger adoption rate than Quicktime) is where the momentum is today for basic playback of video in a browser.
To get started with HTML5 video you can read here. I started that way :)
There are libraries out there that could solve the cross-browser complexity for you. Have a look at this question.
Related
I'm developing a Video on Demand feature for a Django project of mine. It's going to be powered by Azure Media Services.
Currently, I'm trying to run an uploaded video via the following code:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}'>
<source src="{{ video.streaming_url }}" type="video/mp4" />
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
where {{ video.streaming_url }} contains a streaming url of the sort http://example.streaming.mediaservices.windows.net/66193aae-b739-4cb5-b4b9-f4a4a151c791/myproject.ism/manifest.
My problem is that I get the error no compatible source found for the current browser environment (0x10600003). In fact, I get that error when I go to http://ampdemo.azureedge.net/azuremediaplayer.html as well (i.e. an official azure media player demo).
It seems the 0x10600003 error code implies Autoselect failed to find a player. Note that Youtube videos work perfectly in my environment. My OS is Ubuntu 14.04, and the browser is Mozilla Firefoz 41.0.1. A previous unaccepted answer guided the op to install and enable Silverlight. I can't expect all my users to do that. How do I get playback to work?
Azure Media Player is built on 4 different players, a DASH player, a Flash player, the Silverlight player, and the native implemented player for the browser you're watching the video on. These different "Player Techs" playback different protocols supported my Azure Media Services- DASH, Smooth, and HLS.
AMP intelligently decides which player/playback protocol to use for a specific/device or browser by looking at what technologies/features the browser supports. First, it'll check if the browser supports Media Source Extensions. MSE allows the browser to playback adaptive bitrate streams without the use of plugins like Flash and Silverlight, it's supported in most modern browsers, but not always in older versions of those browsers. If MSE is supported,AMP will playback your content using the MPEG-Dash protocol and you're good to go. If MSE isn't supported, AMP will check and see if Flash is installed and then if Silverlight is installed. If either of these are true it will play back using the installed plugin and the Smooth Streaming protocol. If neither of them are installed, it will try to play back via the native html5 video tag implementation of the browser. This is completely dependent on the browser, and most do not support ABR streams natively (except, for example, Safari via HLS)
Your short answer, given this background information, is that because you are using an older version of FF that does NOT support MSE, you need to install either Flash or Silverlight to play back your adaptive bitrate streams.
a few mitigations for you/customers:
1) install Flash/Silverlight
2) download an up-to-date version of FF, we recommend this for sure because MSE is supported in v42 but in v47+ Google Widevine protected content is supported, which means you can playback DRM encrypted content without Silverlight
see Azure Media Player's Compatibility Matrix for more info on what's supported on which browsers.
If you have any more questions, you can email me at ampinfo#microsoft.com, hope this helps!
I just knocked off the content policy and created a new one and it started working again.
I'm building an application with the MEAN stack that allows users to use a mobile device's rear-facing camera through a browser. I am looking for a way to utilize a rear-facing camera to take a photo and save it to a database where I'll use it in a inventory system. I have looked at HTML5's getUserMedia() but seems to use mostly Audio and Video. Can anyone point me in a direction that will be useable across up-to-date browsers as well.
Possible duplicate answer : HTML5 Camera Access Through Browser in iOS
You would use
<input type="file" id="take-picture" accept="image/*"> to prompt the user for access to their camera.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/API/Camera_API/Introduction
Works on Android 3.0+ and iOS 6.0+
It has to work on IE8 and above, and the rest of the modern browsers (Firefox, Chrome, Opera).
Related question:
How to play a notification sound on websites?
I've tried using the Yahoo! Media Player, but it refuses to pick up on my .mp3 links despite them looking like:
<a id="wolf-blue" href="/Public/audio/wolf.mp3">a</a>
Assuming I have a .mp3 file and I want to play it when a timer reaches 0, what do you suggest I use to play this sound file? I do not want to show my users any sort of player UI, just play the sound.
You'll want to check out jPlayer. It's an HTML5 Audio player that has fallback to Flash for browsers that don't support HTML5.
You can use CSS to completely customize the player, including hiding it from view.
I was wondering if I can access the webcam via a browser plugin e.g. for Firefox, Safari, Internet Explorer etc?
Are there already similar plugins/add-ons?
Thanks
It's possible to access the webcam through Flash, for instance.
An example of this is Omegle, which uses Flash to access the webcam.
An alternative is doing it in Silverlight, as in this example.
Finally, there's Java, in which you could write an applet to access the webcam. This article should demonstrate this.
If you wish to do it yourself, you will have to write the plugins yourself.
This can be done using the NPAPI for most browsers, or by writing a BHO (Browser Helper Object) for Internet Explorer.
How to interact with the webcam there depends on which language you choose, as you have full access to system libraries.
Note that writing a custom browser plugin is both harder, and a larger hassle for users, as they have to install something new, as opposed to just using their existing browser plugins.
I just found this:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
One year and a half after this question was made. I haven't tested it, but maybe it'll help.
From the link (just a copy/paste showing how to record something using the camera as input source):
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
None of the major Webbrowser's (IE, FF, Chrome) provide any special support for Webcams. You will need to either use the native OS's API (whatever that may be), or embed Flash in Webbrowser control in your browser plug-in.
You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS
To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
(Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).To make video recording work on Safari, it maybe worthwhile to explore https://github.com/ronghanghu/webcamjs (Note flash plugin needs to be installed and enabled)
Helpful demonstrations :
https://webrtc.github.io/samples/
https://mozdevs.github.io/MediaRecorder-examples/index.html
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/
What is the recommended (cross-browser) video format to use on websites so that users' browsers (or most of them) wouldn't require to download a plugin to view it?
There is no single video that will play in every browser. If you want it to work across the most browsers, you're going to have to encode your video more than once. Dive into HTML5 video has the gory details.
You nest your video references so that browsers try these in order, falling back if it's not supported:
Ogg Theora
MP4 H.264
A Flash container displaying #2
Number 1 gets you Firefox 3.5 and Chrome. Number 2 gets you Safari and the mobile phone WebKit browsers. Number 3 gets you IE, Firefox ≤3, and Opera.
There is no such format available yet. The best way to go is:
Flash (most of the users have flash plugin installed already, 99% according to http://www.adobe.com/products/player_census/flashplayer/)
OGG (This will be available in HTML5 as standard)
Yes HTML5 will solve some of the problems of not needing a plugin, but different browser vendors have chosen different codecs and file formats. It's complicated, but Dive Into HTML 5 has a great article.
None! but you can do it with HTML 5 which is not implimented by all browsers ...
if you really need a video on your page i would recommend flash or silverlight
In a couple of months HTML 5 will be supported by almost all browsers on this planet. If you are planning to run your services in 2010 just use OGG open standard container format. It is unrestricted by software patents and is designed to provide for efficient streaming and manipulation of high quality digital multimedia. It is already supported by Firefox 3.5 and soon all browsers will support it.
Please look at documentation and wiki on http://www.xiph.org/ogg/
A giant GIF. (You could attach a Javascript image preloader script to the movie to load it.)
Microsoft Video Codec VC1