Accessibility issues and keyboard control Created Aug 4, 2009

Hi, there is a way to make flowplayer more accessible until, controls inside it, will have correct labels accessible to screen reader.

The first step is to have flowplayer controlled via javascript like in this example:
http://flowplayer.org/plugins/javascript/controlbar.html

To make things easyer look at the page with just the standalone version:http://flowplayer.org/demos/plugins/javascript/index.htm

The next step is to make controls reachable via keyboard and the easyest way is to add a href="javascript:;" (or tabindex, but can be confusing) to the play mute links. Those link unfortunately are inside flowplayer.js

Then you can make it better adding tiltes to those links (in order to make appear the tooltip on FF)

The last step could be to change a little the css (controls-hulu.css), in order to change the buttons not only if the mouse stops over them, but also the keyboard.
For example you must change things like this:

div.hulu a.play:hover {
background-position:10px -105px;
}


into this

div.hulu a.play:hover , div.hulu a.play:focus, div.hulu a.play:active {
background-position:10px -105px;
}

I followed the plan on this post and worked out almost full keyboard accessibility. The only stumbling block is that the Captions plug-in has an embedded "CC" button to toggle the "content" pane visibility, which cannot be accessed from the keyboard. So, it is the plug-in used to give more accessibility which is now the most inaccessible part.

It would be great if the "cc" toggle were available to be controlled like the rest of the Flowplayer controls.

The best way to explain what I mean:

http://www.regione.emilia-romagna.it/sin_info/LineeGuida/examples/flowplayer/

Starting with version 3.2 the player SWF sets up following keyboard shortcuts:

• Key UP, ctrl+K: volume up
• Key DOWN, ctrl+J: volume down
• Key RIGHT: jumpseek forward
• Key LEFT: jumpseek backward
• space: toggle play/paus

There is also a onKeypress event that gets fired when a key is pressed. You can use that to control the player, for example, when a key is pressed.

Note that the player SWF needs to have focus before these works. You can set focus by clicking the player.

It seems that these are not documented anywhere! Will fix that.

I try to install many players with javascript controlbar on the same page but it looks impossible. The second player don't work at all. Because I was thinking that it was my fault, I finish to make a copy of the standalone page, in order to put a second player and it is the same problem. I saw on other demos in this site that it never works when there are many players on the same page (looking with IE6, or IE7, or IE8...)
My real problem is to make the player accessible and the basic with flash is not seen by screen reader as Jaws, even the latest version with keyboard shortcuts... The javascript controlbar looks to be better (but with many things to fix) and I need to have more than one player into the same page.

You can fix things to work, having many players in one page.
Starting from the example herehttp://flowplayer.org/plugins/javascript/controlbar.html, you can see that the code refers to id="huluPlayer".

id must be unique, if, for any player you use unique id's, things should work (change id in html , and javascript calls).

But if you can't manage this, think about making a page with just snaphot of the video, linked to a page with a single player: you usually don't need more players in one page, because usually you don't need to see more than a single video in one time...

Thanks a lot for youy answer, I just try your solution but it don't works.
I need to have mutliple players into the the same page for this reason : I am making a website for a blind people. In this website, he has some tutorials in mp3 files (tutorials for the use of Jaws), the tutorials are divided in chapiters because it would be too long in one single file. For instance, he has made a tutorial for the FNAC website, which is divided into 6 chapiters, ie 6 mp3 files. I have made a page only for the FNAC tutorials and I try to put the 6 mp3 into this page. With the basic flowplayer (flash), it works perfectly, but the flash flowplayer is not good with Jaws (accessibility...), then I choose to use the javascript controlbar. But one other thing I have to think is that my client is also the webmaster of his website, then I cannot "force" him to create a too important number of pages, nor use too long code into each page. It is the reason why I choose flowplayer, since the code for it is only an a href tag. The website must be accessible for reading, but also for managing. And the people who will come to read those pages will be also blind people...

As I thought, your problem can have other solutions. Maybe you need just a way to play different files in the same player.
Put one player on the page and the links to all different files to play in the player.
I've found this page in this sitehttp://flowplayer.org/demos/plugins/javascript/playlist/instream.html
It could serve your purposes. As I can see the links to files are just elements that screen reader and keyboard should manage.

Thanks a lot for your answer, but the link you gave me didn't work... I just discover that mp3 files are not so good with the javascript controlbar, if I convert them into flv, they work fine, but always lonely. I kept on searching and I found that :http://flowplayer.org/forum/4/18673 wich is probably the solution, and which is in the thread of your first answer. But I cannot make it work. I post also a message. Here is the code of my test page :

<html>
<head>
<script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>
<script src="flowplayer.controls-3.0.2.js"></script>
<link rel="stylesheet" type="text/css" href="controls-hulu.css"/>

</head>
<body>

Track 1
<a 	href="00_introduction.mp3" style="display:block;width:500px;height:0;" id="huluPlayer"></a>
<div id="hulu1" class="hulu"></div>
<br/><br/>

Track 2
<a 	href="05_conclusion.mp3" style="display:block;width:500px;height:0;" id="huluPlayer"></a>
<div id="hulu2" class="hulu"></div>

<script type="text/javascript">
// install everything after page is ready
window.onload = function() {
		flowplayer("huluPlayer", "flowplayer-3.2.4.swf", {
		// don't start automatically
		clip: {	autoPlay: false	},
		audio: {url: 'flowplayer.audio-3.2.1.swf'},
		// disable default controls
		plugins: {controls: null}
	// install HTML controls inside element whose id is "hulu"
	})
	$f().controls("hulu1", "flowplayer.controls-3.0.2.swf");
	$f(1).controls("hulu2", "flowplayer.controls-3.0.2.swf");
	
};

</script>
</body>
</html>

I cannot see where is my mistake. If I can make it work, I will then add the very good modification you have done for accessibility. Thanks a lot if you can help me...

I'm sorry that I don't have time now, to check code deeply, but..
I can give you now only the alternative solution:
1 pge, 1 player, 1 accessible toolbar on it, and as many links to mp3 files on the same page to be played in that single flowplayer.

I suggested you to check the example of the playlist that in theory should work fine.
I mean the player should load the playlist files, no matter if mp3, or flv. And this is one problem solved by the link I posted.

The other problem is the accessible toolbar, but if you have just one player you won't need to call

$f().controls("hulu1", "flowplayer.controls-3.0.2.swf");
	$f(1).controls("hulu2", "flowplayer.controls-3.0.2.swf");

just need the 1st call of the controlbar.

Check that exapme page, look at the code inside starting from line 259, on how to make a playlist, and links in html to clips (whom Jaes should see)

playlist: [

		// 1st clip
		{
			url: 'KimAronson-TwentySeconds63617.flv',

Thanks a lot for this answer, but I can't see the link toward the example page... nevertheless, I try to find it and to make this today

I mean take all from this link
http://flowplayer.org/demos/plugins/javascript/playlist/instream.html
it seems that is working

I am working on it now, many thanks for your help

I think I succeed in this page :
http://www.bertrandjoliet.com/tanguy/playlist/playlist+javascript.html
I had use the playlist system as you said, then I add the javascript controlbar and the modifications you have created for the hulu controlbar. As the player is just for mp3 file, I suppress all functions but the play/pause button.
I don't make yet the css, and the page is a little bit ugly.
I am just now waiting for the test with Jaws...
Many, many thanks for your great help,

When you publish it, plese post it here, in order to share.
mercì

I just receive the confirmation, the player as I had modify it, thanks to your help, is working perfectly fine with Jaws. Just one thing to fix is that the flash player which is in the background is seen by Jaws, without the ability of doing something with it of course, but it is as a unusefull noise. I have add then wmode: transparent and I am waiting tomorrow to know if it fix this little problem. As I can see the whole thing now, it seems to me that this should be rewrited by someone whith more skills than me, in order to delete unemployed functions and so on. I will publish everything tomorrow...

Here is the code of the adaptation of the flowplayer more playlist and javascript controlbar in order to be correctly seen by screen readers. The goal was to do an accessible mp3 player with multiple sound tracks into the same page The page has been tested only with Jaws. The css used is the one made by jdeyla in this post :http://flowplayer.org/forum/7/24451#post-25189, and the javascript controlbar is also from this post. The modification made into the css is display:none for mute, track and time, because those functions are or unusefull (mute), or just not very usefull and are waste of time during the reading by Jaws (for videos, just delete the display:none).
The page is in strict mode.
The code of the page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>
<script src="flowplayer.playlist-3.0.8.min.js"></script>	
<script src="flowplayer.controls-3.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="controls-hulu.css"/>

</head>
<body>
<!-- playlist container -->
	<div class="entries"> <!-- class "entries" is in controls-hulu.css -->
			<a href="#">
			<strong>${title}</strong> <br />
			</a>		
	</div>	
<!-- player container -->
<div style="width:46px;height:0;" id="player"></div>
<div id="hulu" class="hulu"></div>

<!-- let the rest of page float normally -->
<br clear="all" />

<!-- flowplayer installation and configuration -->
<script language="JavaScript">
flowplayer("player", "flowplayer-3.2.4.swf",{ 
clip: {	autoPlay: false	}, //<- I delete the autobuffering, it cause an autoplay with mp3 files
	playlist: [
		{url: 'file_name_1.mp3', title: 'Track 1'},
		{url: 'file_name_2.mp3', title: 'Track 2'}
	],
	plugins: {controls: null}
	}).controls ("hulu", {url: 'flowplayer.controls.3.2.2.swf', wmode: 'transparent', playlist: true}); // wmode:transparent in order to skip the flash during the reading by Jaws
</script>
<!-- initialize playlist -->
<script>
$(function() {
$f().playlist(".entries", {loop: true});
});
</script>

</body>
</html>

The CSS

/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.hulu {
	position:relative;
	float:left;
	height:40px;
		/* black background with a gradient */
	background:#000 url(hulu.png) repeat-x 0 -4px;
	width:46px;
}

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(hulu.png) no-repeat 10px -61px;
	cursor:pointer;
	border-right:1px solid #000; 
}

div.hulu a.play:hover , div.hulu a.play:focus, div.hulu a.play:active {
	background-position:10px -105px;	
}

/* pause state */
div.hulu a.pause { 
	background-position:11px -148px;
}

div.hulu a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.hulu div.track {  
display: none;
	left:47px;
	position:absolute;
	cursor:pointer;
	width:285px;
	border-left:1px solid #999;
	height:40px;	
}

/* the draggable playhead */
div.hulu div.playhead {
display: none;
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:3px;
	height:40px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.hulu div.progress, div.hulu div.buffer {	
	position:absolute;
	background-color:#4ff;
	width:0px;
	height:40px;
}

div.hulu div.buffer {
	background-color:#fff;
}

/* time display */
div.hulu div.time {
display: none;
	position:absolute;		
	width:129px;
	left:330px;
	padding:12px 0;
	text-align:center;
	border:1px solid #999;
	border-width:0 1px;
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff; 
}

/* total duration in time display */
div.hulu div.time strong {
	font-weight:normal;
	color:#666;
}

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
display:none;
}

.entries{
float: left;
font-family: arial;
font-size:13px;
width:200px;
height:200px;
border: 1px solid #000000;
}
a.entries{
font-family: arial;
font-size:13px;
width:200px;
height:200px;
}

Just one remark about this work, and about accessibility. Jdeyla has done a great job in this post and my own modifications seems to be usefull for Jaws. There are many little things to fix of course*. But it appears to me that every modifications added in order to have a true accessibility with the flowplayer need true skills in javascript. I am not very skilled and this adaptation asks many hours of work. One of the first criteria of accessibility should be that the way of building and using Flowplayer could be also for unskilled people... I mean may be clearer informations, more detailled codes, more standalone examples pages...
Again many thanks for the great help !

*one thing to fix would be what is red by Jaws on the play/pause button : when the player is not playing, there is the word 'play', then if playing, the word 'pause' is not coming and it stays on the word 'play'. I was totally unable to understand why !
One other thing would be to have an indication of what sound track is playing. I am now working on that second thing, but I cannot find the solution...