Edit: This question was written in 2008, which was like 3 internet ages ago. If this question is still relevant to your environment, please accept my condolences. Everyone else should convert into a format supported by your browsers (That would be H.264 if Internet Explorer is needed, and probably AV1, VP8/VP9 if not) and use the <video> element.
We are using WMV videos on an internal site, and we are embedding them into web sites. This works quite well on Internet Explorer, but not on Firefox. I've found ways to make it work in Firefox, but then it stops working in Internet Explorer.
We do not want to use Silverlight just yet, especially since we cannot be sure that all clients will be running Windows XP with Windows Media Player installed.
Is there some sort of Universal Code that embeds WMP into both Internet Explorer and Firefox, or do we need to implement some user-agent-detection and deliver different HTML for different browsers?
The following works for me in Firefox and Internet Explorer:
<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="320" height="310">
<param name="filename" value="./test.wmv">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="ShowStatusBar" value="true">
<param name="windowlessvideo" value="true">
<embed src="./test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310">
</object>
May I suggest the jQuery Media Plugin? Provides embed code for all kinds of video, not just WMV and does browser detection, keeping all that messy switch/case statements out of your templates.
Use the following. It works in Firefox and Internet Explorer.
<object id="MediaPlayer1" width="690" height="500" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"
>
<param name="FileName" value='<%= GetSource() %>' />
<param name="AutoStart" value="True" />
<param name="DefaultFrame" value="mainFrame" />
<param name="ShowStatusBar" value="0" />
<param name="ShowPositionControls" value="0" />
<param name="showcontrols" value="0" />
<param name="ShowAudioControls" value="0" />
<param name="ShowTracker" value="0" />
<param name="EnablePositionControls" value="0" />
<!-- BEGIN PLUG-IN HTML FOR FIREFOX-->
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src='<%= GetSource() %>' align="middle" width="600" height="500" defaultframe="rightFrame"
id="MediaPlayer2" />
And in JavaScript,
function playVideo() {
try{
if(-1 != navigator.userAgent.indexOf("MSIE"))
{
var obj = document.getElementById("MediaPlayer1");
obj.Play();
}
else
{
var player = document.getElementById("MediaPlayer2");
player.controls.play();
}
}
catch(error) {
alert(error)
}
}
Elizabeth Castro has an interesting article on this problem: Bye Bye Embed. Worth a read on how she attacked this problem, as well as handling QuickTime content.
You could use conditional comments to get IE and Firefox to do different things
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
The browsers themselves will ignore code that isn't meant for them to read.
The best way to deploy video on the web is using Flash - it's much easier to embed cleanly into a web page and will play on more or less any browser and platform combination. The only reason to use Windows Media Player is if you're streaming content and you need extraordinarily strong digital rights management, and even then providers are now starting to use Flash even for these. See BBC's iPlayer for a superb example.
I would suggest that you switch to Flash even for internal use. You never know who is going to need to access it in the future, and this will give you the best possible future compatibility.
EDIT - March 20 2013.
Interesting how these old questions resurface from time to time! How different the world is today and how dated this all seems. I would not recommend a Flash only route today by any means - best practice these days would probably be to use HTML 5 to embed H264 encoded video, with a Flash fallback as described here: http://diveintohtml5.info/video.html
Encoding flash video is actually very easy with ffmpeg. You can use one command to convert from just about any video format, ffmpeg is smart enough to figure the rest out, and it'll use every processor on your machine. Invoking it is easy:
ffmpeg -i input.avi output.flv
ffmpeg will guess at the bitrate you want, but if you'd like to specify one, you can use the -b option, so -b 500000 is 500kbps for example. There's a ton of options of course, but I generally get good results without much tinkering. This is a good place to start if you're looking for more options: video options.
You don't need a special web server to show flash video. I've done just fine by simply pushing .flv files up to a standard web server, and linking to them with a good swf player, like flowplayer.
WMVs are fine if you can be sure that all of your users will always use [a recent, up to date version of] Windows only, but even then, Flash is often a better fit for the web. The player is even extremely skinnable and can be controlled with javascript.
I found a good article about using the WMP with Firefox on MSDN.
Based on MSDN's article and after doing some trials and errors, I found using JavaScript is better than using conditional comments or nested "EMBED/OBJECT" tags.
I made a JS function that generate WMP object based on given arguments:
<script type="text/javascript">
function generateWindowsMediaPlayer(
holderId, // String
height, // Number
width, // Number
videoUrl // String
// you can declare more arguments for more flexibility
) {
var holder = document.getElementById(holderId);
var player = '<object ';
player += 'height="' + height.toString() + '" ';
player += 'width="' + width.toString() + '" ';
videoUrl = encodeURI(videoUrl); // Encode for special characters
if (navigator.userAgent.indexOf("MSIE") < 0) {
// Chrome, Firefox, Opera, Safari
//player += 'type="application/x-ms-wmp" '; //Old Edition
player += 'type="video/x-ms-wmp" '; //New Edition, suggested by MNRSullivan (Read Comments)
player += 'data="' + videoUrl + '" >';
}
else {
// Internet Explorer
player += 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" >';
player += '<param name="url" value="' + videoUrl + '" />';
}
player += '<param name="autoStart" value="false" />';
player += '<param name="playCount" value="1" />';
player += '</object>';
holder.innerHTML = player;
}
</script>
Then I used that function by writing some markups and inline JS like these:
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
You can use jQuery.ready instead of window load event to making the codes more backward-compatible and cross-browser.
I tested the codes over IE 9-10, Chrome 27, Firefox 21, Opera 12 and Safari 5, on Windows 7/8.
I have found something that Actually works in both FireFox and IE, on Elizabeth Castro's site (thanks to the link on this site) - I have tried all other versions here, but could not make them work in both the browsers
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
id="player" width="320" height="260">
<param name="url"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
Check her site out: http://www.alistapart.com/articles/byebyeembed/ and the version with the classid in the initial object tag
December 2020 :
We have now Firefox 83.0 and Chrome 87.0
Internet Explorer is dead, it has been replaced by the new Chromium-based Edge 87.0
Silverlight is dead
Windows XP is dead
WMV is not a standard : https://www.w3schools.com/html/html_media.asp
To answer the question :
You have to convert your WMV file to another format : MP4, WebM or Ogg video.
Then embed it in your page with the HTML 5 <video> element.
I think this question should be closed.
Related
adaptives links for mpeg dash on wowza server not working with me, the following are the steps that I used to publish video on wowza:
I install and configure Wowza server, and I tested it and it is working fine.
Transcode this video using ffmepg (I bring these command from wowza documentation)
I test the files and all of them workig fine then I moved these files to wowza content folder and create the smil file as following:
<?xml version="1.0" encoding="UTF-8"?>
<smil title="sintel">
<body>
<switch>
<video width="320" height="180" src="sintel_320p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="640" height="360" src="sintel_640p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="520000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="320" height="180" src="sintel_400p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="270000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="420" height="270" src="sintel_700p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="570000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="720" height="406" src="sintel_1100p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1000000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1024" height="576" src="sintel_1300p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1080" height="608" src="sintel_1500p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1400000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
</switch>
</body>
</smil>
I use the mpd file (http://191.237.26.137:1935/vod/smil:sintel.smil/manifest.mpd) with http://www.jwplayer.com/innovation/roadmap/mpeg-dash/
Result: the video work for first few seconds the stop
It looks like from your description that there is keyframe alignment problem between the files. For switching to occur smoothly, each rendition must be key frame aligned meaning that a key frame that occurs at a specific timecode in one file must also occur at the same timecode in all of the other files. The default option with Dash is to request video segments are created and named based on the keyframe timecodes. If the player switches to a rendition that doesn't have a specific segment that is requested (because its key frame timing is off) then it will fail with a 404 response.
Wowza server builds the HTTP manifests dynamically from the moov atom data in the media files. In the case with an Adaptive bitrate manifest, it only reads the data from the first file and expects that the data will be identical in the other files. The default file plays fine because that was the one that the data came from and individual files play fine because fresh data is extracted from the file when each file is requested.
Id based segmentation (where the segments contain multiple key frames and are numbered sequentially, such as is used with HLS or HDS) is less susceptible to alignment problems however, you may notice the stream jumping forward or backwards if it switches to a different rendition and the timecodes in the new chunk don't align with the old chunk. Mpeg Dash can be configured to use ID based segmentation by changing the manifest url. See Delivery Formats for details.
Ffmpeg may do a better job at creating aligned encodings by disabling scene detection or doing two pass encoding and using the same first pass log for each second pass.
I just started using VideoJS. Quite impressed with the ease of initial setup of the Javascript library and the clean integration of videos into web pages.
However I encountered an issue of displaying subtitles in a foreign language (e.g. Chinese). The following is the code for embedding video
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640"
height="264" poster="Image/oceans-clip.png" data-setup="{}">
<source src="Video/oceans.mp4" type='video/mp4'/>
<track kind="captions" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="captions" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="subtitles" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
The issues I have are:
1) The Chinese captions in "demo.captions_C.vtt" are not displayed, even if it is set as default. Instead, captions in "demo.captions.vtt is " are displayed.
2) I tried to select "Chinese" in the caption menu. There was no response and no change.
The "demo.captions_C.vtt" is provided below:
WEBVTT
00:00.000 --> 00:02.332
这是中文字幕
00:02.332 --> 00:10.947
海鸥的英雄礼赞音乐
00:10.947 --> 00:17.691
大海在咆哮
00:17.691 --> 00:50.279
鲸鱼在召唤
The only difference (apart from contents) I can tell between demo.captions.vtt and demo.captions_C.vtt is that the latter uses utf8 encoding, while the first one is using us-ascii.
I am wondering (a) if I have missed anything in the html code in integrating with the video tag in configuring tracks. Why only English is displayed. (b) has anyone successfully used vtt file that is using UTF-8 encoding? please let me know your procedures.
Here is a working example with Chinese subtitles:
https://jsfiddle.net/xrpnbwfz/1/
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
If you are using the latest version 4.12, there are some known issues with captions/subtitles: https://github.com/videojs/video.js/issues/1888 https://github.com/videojs/video.js/issues/1904
https://github.com/videojs/video.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+caption
I am using flowplayer to play flash video. I've set autobuffering to true but it is still loading the whole video before playing. I've also tried setting bufferlength: 2, but no better. When using HTML5 (code not shown), it works correctly. Any ideas? Looks like JWPlayer does the same thing - although it at least shows that something is happening. Is this an issue with Flash that the swf has to process the whole file first?
<object id="flowplayer" width="640" height="360"
data="./flowplayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "./videos/<? echo $video ?>.mp4", "autoPlay":true, "autoBuffering":true}}' />
</object>
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>