アクセシビリティに配慮したクロスブラウザHTML5メディアプレーヤー Able Player

: らら

2023.04.11

JavaScript

はじめに

視覚に障害、聴覚に障害、手が使えない、年齢により発生する障害などさまざまな障害をもつ人がいます。

手が使えない人は。マウススティックでキーボードを使用します。視覚に障害があるとひと、スクリーンリーダーを使用します。

マウススティックは、手を使ってキーボードを操作することが困難な人が，口にくわえてタイピングする道具です。

スクリーンリーダーとは、パソコンなどの画面表示を音声化して操作するソフトです。

そういった人たちにアクセシビリティに配慮したクロスブラウザHTML5メディアプレーヤー Able Playerの紹介です。

Able Playerとは

オーディオとビデオ両方対応します。

ノーマルプレイヤーとしても使用できます。

WebVTTを使用したテキストベースのオーディオ説明もサポート。

キーボードでアクセス可能で、スクリーンリーダーユーザー向けに適切にラベル付けされ、音声認識ユーザーが制御できるプレーヤーコントロールの完全なセットが含まれています。

WAI-ARIAもサポート

対応言語


カタロニア語
中国語, 繁体字 (台湾)
オランダ語
英語
フランス語
ドイツ語
ヘブライ語
イタリア語
日本語
ノルウェー語
スペイン語
トルコ語

対応ブラウザー

Firefox 3.x以上、nternet Explorer 10以上、Microsoft Edge、Google Chrome 7.0以上、Opera 10.63 以上、Safari IOS 3.2.2、Chrome on Android 4.2以上

スマフォブラウザーに制限があります。ボリュームコントロールと自動起動など

依存関係

jQueryを使用します。バージョン 3.2.1 以上を推奨

js-cookieを使用します

設置方法

https://ableplayer.github.io/ableplayer/

上記からzipをダウンロードします。解凍後、下記をコピーします。

translationsは、build、button-iconsと同じ階層に設置します。buildの名前は変更しても問題ありません。


├─build
│      ableplayer.dist.js
│      ableplayer.js
│      ableplayer.min.css
│      ableplayer.min.js
│      ableplayer.min.js.txt
├─button-icons
│  │  able-icons.svg
│  │  
│  ├─black
│  │      captions.png
│  │      chapters.png
│  │      close.png
│  │      descriptions.png
│  │      ellipsis.png
│  │      faster.png
│  │      forward.png
│  │      fullscreen-collapse.png
│  │      fullscreen-expand.png
│  │      help.png
│  │      next.png
│  │      pause.png
│  │      pipe.png
│  │      play.png
│  │      preferences.png
│  │      previous.png
│  │      rabbit.png
│  │      restart.png
│  │      rewind.png
│  │      sign.png
│  │      slower.png
│  │      stop.png
│  │      transcript.png
│  │      turtle.png
│  │      volume-loud.png
│  │      volume-medium.png
│  │      volume-mute.png
│  │      volume-soft.png
│  │      
│  ├─fonts
│  │      able.eot
│  │      able.svg
│  │      able.ttf
│  │      able.woff
│  │      
│  └─white
│          captions.png
│          chapters.png
│          close.png
│          descriptions.png
│          ellipsis.png
│          faster.png
│          forward.png
│          fullscreen-collapse.png
│          fullscreen-expand.png
│          help.png
│          next.png
│          pause.png
│          pipe.png
│          play.png
│          preferences.png
│          previous.png
│          rabbit.png
│          restart.png
│          rewind.png
│          sign.png
│          slower.png
│          stop.png
│          transcript.png
│          turtle.png
│          volume-loud.png
│          volume-medium.png
│          volume-mute.png
│          volume-soft.png
│          
│      
└─translations
        ca.js
        cs.js
        da.js
        de.js
        en.js
        es.js
        fr.js
        he.js
        id.js
        it.js
        ja.js
        nb.js
        nl.js
        pt-br.js
        pt.js
        sv.js
        tr.js
        zh-tw.js

HTML呼び出し

translationsは呼び出し不要です。html lang="ja"で自動判定されます。


<!-- Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="build/ableplayer.min.css" type="text/css"/>
<!-- JavaScript -->
<script src="build/ableplayer.min.js"></script>

必須属性

audio,videoタグに属性を追加します。


id ： 必須です。ユニークなものを指定します。
data-able-player ： 必須です。こちらの指定で自動でプレイヤーに反映します。

音声の場合

オプションは、data-属性で指定します。


<audio id="audio1" data-able-player preload="auto">
	<source type="audio/ogg" src="path_to_audio_file.ogg"/>
	<source type="audio/mpeg" src="path_to_audio_file.mp3"/>
</audio>

動画の場合

オプションは、data-属性で指定します。

別途音声解説をつけるにはdata-desc-srcを付加して、映像ファイルを追加します。


<video id="video1" data-able-player preload="auto" width="480" height="360" poster="path_to_image.jpg">
	<source type="video/webm" src="path_to_video.webm" data-desc-src="path_to_described_video.webm"/>
	<source type="video/mp4" src="path_to_video.mp4" data-desc-src="path_to_described_video.mp4"/>
	<track kind="captions" src="path_to_captions.vtt"/>
	<track kind="descriptions" src="path_to_descriptions.vtt"/>
</video>

一般的な指定、音声解説、WebVTTなし


<video id="video1" data-able-player preload="auto" poster="path_to_image.jpg" playsinline>
	<source type="video/mp4" src="path_to_video.mp4">
</video>

MIME タイプ

映像が再生されない場合、サーバーに下記を設定してください。 .htaccessファイルでも設定可能なサーバーもあります。


# Audio MIME Types
AddType audio/mpeg mp3
AddType audio/mp4 mp4
AddType audio/mp4 mpa
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/wav wav
# Video MIME Types
AddType video/mp4 mp4
AddType video/ogg ogv
AddType video/webm webm

キーボードショートカット

Able Playerには、ユーザーが制御できるようにするいくつかのキーボードショートカットが含まれています次のように、Webページ上のどこからでもプレーヤーを作成します。


p orスペースキー = 再生/一時停止
s = 停止
r = 巻き戻し
f = フォワード
b = 戻る (プレイリスト内の前のトラック)
n = 次へ (プレイリストの次のトラック)
c = キャプション
d = 説明
m = ミュートのオン/オフ
v または 1-9 = ボリューム
e = 環境設定

字幕ファイル：vttファイル(WebVTT)の内容

時間は時：分：秒.ミリ秒で指定します。

下記をテキストで拡張子.vttで保存します。

はじめの時間＋スペース＋"-->"＋スペース+おわりの時間は重要です。


00:00:00.110 --> 00:00:20.200
１番目の字幕
00:00:08.220 --> 00:00:20.510
２番目の字幕
00:00:10.160 --> 00:00:30.480
3番目の字幕

W3Cサンプル

https://w3c.github.io/wai-video-standards-and-benefits/videos/standards-and-benefits/ja

名古屋のWeb制作会社