I've created a custom CAF receiver for playing back MPEG-DASH content which is encrypted using Widewine. My content also has TTML subtitles embedded in the manifest which can be changed dynamically.
Playing my encrypted content works like a charm - even better than on the V2 receiver. I can even select between my different subtitles.
However, the positioning of the subtitles is way off. They aren't centered in they player and sometimes they're cut off in the middle of a cue (see my attached image).
I can tell that the CAF Receiver uses the shaka-player which, from what I can tell, handles parsing of subtitles itself - https://github.com/google/shaka-player/tree/master/lib/text
As far as I can tell from the CAF receiver documentation, there's no way of manipulating the positioning of the subtitles on the receiver. They aren't added to the DOM or anything, so you can't hack it with css. Only thing you can do is set a TextTrackStyle on the TextTracksManager, which only allows setting colors and the like. You have no option to do textAlignor similar.
My questions:
Is this a known bug in the CAF Receiver/shaka-player?
Has anyone else had a similar problem? If so, did you manage to fix it?
Any help is greatly appreciated!
Example 1
ttml example:
<tt xmlns="http://www.w3.org/ns/ttml"
xmlns:tt="http://www.w3.org/ns/ttml"
xmlns:ttm="http://www.w3.org/ns/ttml#metadata"
xmlns:tts="http://www.w3.org/ns/ttml#styling"
xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
xmlns:ebutts="urn:ebu:tt:style" xmlns:ebuttm="urn:ebu:tt:metadata"
xml:lang="" ttp:timeBase="media">
<head>
<metadata>
<ebuttm:documentMetadata>
<ebuttm:conformsToStandard>urn:ebu:tt:distribution:2014-01</ebuttm:conformsToStandard>
</ebuttm:documentMetadata>
</metadata>
<styling>
<style xml:id="Style0_0" tts:fontFamily="proportionalSansSerif" tts:backgroundColor="#00000099" tts:color="#FFFF00" tts:fontSize="100%" tts:lineHeight="normal" ebutts:linePadding="0.5c" />
<style xml:id="textAlignment_0" tts:textAlign="center" />
</styling>
<layout>
<region xml:id="Region" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
</layout>
</head>
<body>
<div>
<p region="Region" style="textAlignment_0" begin="114:24:22.120" end="114:24:24.120" xml:id="sub_0">
<span style="Style0_0">Das hat sich im Grunde</span>
<br />
<span style="Style0_0">aus dem Spiel des Seins so ergeben.</span>
</p>
</div>
</body>
</tt>
Turns out this is a bug related to the usage of VTTRegion in the shaka-player on Chrome, which has been fixed in v2.2.9 and v2.3.0. The CAF receiver currently loads v2.2.1.
https://github.com/google/shaka-player/issues/1188
Until Google updates the CAF receiver to use a newer version of the player, you'll either have to live with the misplaced subtitles or do a hack to override what version of the player is loaded on the receiver.
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 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'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>
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.