Making it possible to tab to captions.
When a VideoAlpha is present on the page, if the user tries to tab through out the entire page, eventually he will land on the VideoAlpha controls. The tab index order has been set up so that all control receive focus eventually in the order from left to right. When a control receives focus, it is hilighted. The last tab focuses the captions dialog. When the captions dialog has focus, the Up and Down arrows can scroll it up and down.
This commit is contained in:
Valera Rozuvan
@@ -133,7 +133,6 @@ div.videoalpha {
|
||||
line-height: 46px;
|
||||
padding: 0 lh(.75);
|
||||
text-indent: -9999px;
|
||||
@include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
|
||||
width: 14px;
|
||||
background: url('../images/vcr.png') 15px 15px no-repeat;
|
||||
outline: 0;
|
||||
@@ -150,7 +149,7 @@ div.videoalpha {
|
||||
&.play {
|
||||
background-position: 17px -114px;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
@@ -158,7 +157,7 @@ div.videoalpha {
|
||||
&.pause {
|
||||
background-position: 16px -50px;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
@@ -382,7 +381,7 @@ div.videoalpha {
|
||||
@include transition(none);
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:active, &:focus {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
@@ -403,7 +402,7 @@ div.videoalpha {
|
||||
@include transition(none);
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
@@ -432,7 +431,7 @@ div.videoalpha {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
width: 30px;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
@@ -442,9 +441,9 @@ div.videoalpha {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: inherit;
|
||||
color: #797979;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -513,12 +512,6 @@ div.videoalpha {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
article.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
|
||||
background-color: inherit;
|
||||
color: #797979;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
@@ -1,82 +1,86 @@
|
||||
<%! from django.utils.translation import ugettext as _ %>
|
||||
|
||||
% if display_name is not UNDEFINED and display_name is not None:
|
||||
<h2> ${display_name} </h2>
|
||||
<h2> ${display_name} </h2>
|
||||
% endif
|
||||
|
||||
<div
|
||||
id="video_${id}"
|
||||
class="videoalpha"
|
||||
id="video_${id}"
|
||||
class="videoalpha"
|
||||
|
||||
% if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
|
||||
data-streams="${youtube_streams}"
|
||||
% endif
|
||||
% if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
|
||||
data-streams="${youtube_streams}"
|
||||
% endif
|
||||
|
||||
${'data-sub="{}"'.format(sub) if sub else ''}
|
||||
${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
|
||||
% if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
|
||||
${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
|
||||
${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
|
||||
${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
|
||||
% endif
|
||||
${'data-sub="{}"'.format(sub) if sub else ''}
|
||||
${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
|
||||
|
||||
data-caption-data-dir="${data_dir}"
|
||||
data-show-captions="${show_captions}"
|
||||
data-start="${start}"
|
||||
data-end="${end}"
|
||||
data-caption-asset-path="${caption_asset_path}"
|
||||
data-autoplay="${autoplay}"
|
||||
% if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
|
||||
${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
|
||||
${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
|
||||
${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
|
||||
% endif
|
||||
|
||||
data-caption-data-dir="${data_dir}"
|
||||
data-show-captions="${show_captions}"
|
||||
data-start="${start}"
|
||||
data-end="${end}"
|
||||
data-caption-asset-path="${caption_asset_path}"
|
||||
data-autoplay="${autoplay}"
|
||||
>
|
||||
<div class="tc-wrapper">
|
||||
<article class="video-wrapper">
|
||||
<div class="video-player-pre"></div>
|
||||
<section class="video-player">
|
||||
<div id="${id}"></div>
|
||||
</section>
|
||||
<div class="video-player-post"></div>
|
||||
<section class="video-controls">
|
||||
<div class="slider"></div>
|
||||
<div>
|
||||
<ul class="vcr">
|
||||
<li><a class="video_control" href="#" title="${_('Play')}"></a></li>
|
||||
<li><div class="vidtime">0:00 / 0:00</div></li>
|
||||
</ul>
|
||||
<div class="secondary-controls">
|
||||
<div class="speeds">
|
||||
<a href="#">
|
||||
<h3>${_('Speed')}</h3>
|
||||
<p class="active"></p>
|
||||
</a>
|
||||
<ol class="video_speeds"></ol>
|
||||
</div>
|
||||
<div class="volume">
|
||||
<a href="#"></a>
|
||||
<div class="volume-slider-container">
|
||||
<div class="volume-slider"></div>
|
||||
<div class="tc-wrapper">
|
||||
<article class="video-wrapper">
|
||||
<div class="video-player-pre"></div>
|
||||
|
||||
<section class="video-player">
|
||||
<div id="${id}"></div>
|
||||
</section>
|
||||
|
||||
<div class="video-player-post"></div>
|
||||
|
||||
<section class="video-controls">
|
||||
<div class="slider" tabindex="0" title="Video position"></div>
|
||||
|
||||
<div>
|
||||
<ul class="vcr">
|
||||
<li><a class="video_control" href="#" tabindex="0" title="${_('Play')}"></a></li>
|
||||
<li><div class="vidtime">0:00 / 0:00</div></li>
|
||||
</ul>
|
||||
<div class="secondary-controls">
|
||||
<div class="speeds">
|
||||
<a href="#" tabindex="0" title="Speeds">
|
||||
<h3>${_('Speed')}</h3>
|
||||
<p class="active"></p>
|
||||
</a>
|
||||
<ol class="video_speeds"></ol>
|
||||
</div>
|
||||
<div class="volume">
|
||||
<a href="#" tabindex="0" title="Volume"></a>
|
||||
<div class="volume-slider-container">
|
||||
<div class="volume-slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>
|
||||
<a href="#" class="quality_control" tabindex="0" title="${_('HD')}">${_('HD')}</a>
|
||||
|
||||
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
|
||||
</div>
|
||||
<a href="#" class="add-fullscreen" title="${_('Fill browser')}">${_('Fill browser')}</a>
|
||||
<a href="#" class="quality_control" title="${_('HD')}">${_('HD')}</a>
|
||||
|
||||
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<ol class="subtitles"><li></li></ol>
|
||||
|
||||
</div>
|
||||
<ol class="subtitles" tabindex="0" title="Captions"><li></li></ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
% if sources.get('main'):
|
||||
<div class="video-sources">
|
||||
<p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
|
||||
</div>
|
||||
<div class="video-sources">
|
||||
<p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if track:
|
||||
<div class="video-tracks">
|
||||
<p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
|
||||
</div>
|
||||
<div class="video-tracks">
|
||||
<p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
Reference in New Issue
Block a user