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.
Related
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>
In html page,I can embed vlcplugin as mentioned in videolan page, and get the reference to plugin using jquery.
But it seems that the play(), pause() methods are supported only by vlcplugin upto 0.8.5. How do you play and pause a recent version of plugin?
<embed id="vlcp"
type="application/x-vlc-plugin"
pluginspage="http://www.videolan.org"
name="VLC"
autoplay="no"
loop="no"
volume="100"
width="640"
height="480"
target="test.flv">
</embed>
<a id="playbutton" href="#">Play</a>
<a id="pausebutton" href="#">Pause</a>
I can get reference to the plugin as below
var player = document.getElementById("vlcp");
Now, what do I call to make the embedded plugin play the clip?
I am using firefox as browser, will embedding vlcplugin in html work in chrome ?
You have to use the Playlist object of your VLC player as showed here.
In your particular example, you didn't really create an actual playlist, but you implicitly added one item to it (your "test.flv").
Here's how you can now control your movie (regardless of whether it's Mozilla, Chrome, or IE) - code in CoffeeScript:
player = document.getElementById("vlcp")
if player and player.playlist
// you could also check whether the playlist isn't empty using
// player.playlist.items.count
playlist = player.playlist
// pick whichever action you need from below
playlist.play()
playlist.togglePause()
playlist.stop()
You can also check whether the player is currently playing or paused/stopped by using
// assuming you got the playlist like above
playlist.isPlaying
Here is a demo example:
<html>
<head><title>Demo of VLC mozilla plugin</title></head>
<body>
<h1>Demo of VLC mozilla plugin - Example 1</h1>
<embed type="application/x-vlc-plugin"
name="video1"
autoplay="no" loop="yes" width="400" height="300"
target="http://server.example.org/video1.vob" />
<br />
<a href="javascript:;" onclick='document.video1.play()'>Play video1</a>
<a href="javascript:;" onclick='document.video1.pause()'>Pause video1</a>
<a href="javascript:;" onclick='document.video1.stop()'>Stop video1</a>
<a href="javascript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>
</body>
</html>
Other useful sources/links:
http://www.videolan.org/doc/play-howto/en/ch04.html
http://www.w3.org/2010/05/video/mediaevents.html
Hi I'm trying to modify a web page so that it loads faster.
Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page).
I think I've seen this before, but can't find it anywhere anymore!
right now the code to embed I use is:
<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>
Thanks
Quick and dirty: you could just set the embed code as a global variable somewhere:
<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>
Then put the image in a container div and replace the container's innerHTML onclick:
<div id="videocontainer">
<img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>
There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.
I have a site that creates images for some bit of content after the content is created. I'm trying to figure out what to do in between the time the content is created and the image is created. My thought is that I might be able to set a custom image to display on a 404 error on the original image. However, I'm not sure how to do this with lighttpd. Any ideas or alternatives?
EDIT: The issue is the user isn't the one creating the content, it's being created by a process. Basically we are adding items to a catalog and we want to create a standardized catalog image from an image supplied by the product provider. However, I don't want a slow server on the provider end to slow down the addition of new products. So a separate process goes through and creates the image later, where available. I guess I could have the system create a default image when we create the product and then overwrite it later when we create the image from the provider supplied image.
Another alternative on the client side is to do:
<img src="/images/generated_image_xyz.png"
onerror="this.src='/images/default_image.png'; this.title='Loading...';" />
Use the <object> tag in HTML with a fallback to the default image.
<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
</P>
(Example from w3.org)
As I understand your problem: You want to show an intermediate image until the real image has been generated?
You could display a loading image and use AJAX to change that DOM node into the real image when it's been created. You could write it from scratch or use any of the well known and stable AJAX libraries out there, if you have no preference of your own take a look at jQuery.
Further to #kentlarsson - if you want to do it via Javascript, I recently found this code:
http://jquery.com/plugins/project/Preload and the demo at http://demos.flesler.com/jquery/preload/placeholder/ which does as he suggests - with its 'notFound' option.
I don't know enough about lighttpd to tell you about setting up a custom image with one or more subdirectories in a site though.
I think you could probably solve this on the client side alone.
Based on Jaspers' answer, you could do:
<OBJECT data="/images/generated_image_xyz.png" type="image/png">
Loading..<blink>.</blink>
</OBJECT>
Also layering backgrounds using CSS you could do:
<style type="text/css">
.content_image { width:100px; height: 100px;
background: transparent url('/images/default_image.png') no-repeat }
.content_image div { width:100px; height: 100px; }
</style>
<div class="content_image">
<div style="background:
transparent url('/images/generated_image_xyz.png') no-repeat" />
</div>
The latter solution assumes you don't have any transparency in your generated image.