SublimeVideoの使い方(「HTML5 ビデオ配信」コーナーの 該当セクションを参照)
「SublimeVideoを利用したH.264ビデオの配信」へ
「MP4, WebMを字幕付き配信」へ
「プレイリスト表示の設定」へ
「プレイリスト右側表示の設定」へ
「HD Switching試験:サーバーで相違」へ
SublimeVideoでプレイリスト表示の設定 (Xserver)
 
=スマフォは横画面表示専用ページ=
SublimeVideoで、H.264/MP4, VP8/WebMをプレイリスト付き配信
(2013.06.02作成)
=SublimeVideoの設定と配信方法=
詳細は、SublimeVideoでMP4, WebMを字幕付き配信を参照。
1)
本家の Documentation> Playlists コーナーに準じて(こちらのデモを参照)、HTMLコードを記述して、Playlist用JavaScriptコードを script要素として</body>の直前に、Playlist用CSSを style要素として<head>タッグ内に、別途入手したjQuery libraryと共に埋め込む。そして、
playlistフォルダにプレビュー画像と下記のjquery.min.jsファイルとplaylist_play_icon.png画像を同梱して構築した。
--設定TIPS--
(1) <head>タッグ内に <script type="text/javascript" src="//cdn.sublimevideo.net/js/xxxxxxxx.js"></script>
/* xxxxxxxは登録して取得したサイトのHOSTNAME */
(2) それ以外にも、本家のデモページから取得した ”jquery.min.js”ファイルが必要だった(デモページをIExplorer 9で再生してTemporary Internet Files内に保存されたファイルを使用した)。即ち、
<script type='text/javascript' src="responsive_playlist/jquery.min.js"></script>
を記述。
(3) プレイリストで再生開始用ボタンの画像:playlist_play_icon.pngを、別途入手してPlaylist用CSS内の background:url('playlist/playlist_play_icon.png')に記述する。
そのことは、Playlist用CSS内に以下の如く記載されているが精読しないと気付かない。
/* you can find the play icon here: http://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png */
・・・jquery.min.jsと playlist_play_icon.pngをダウンロードする場所の説明が分かり難く、この設定に到達する迄に少々苦労した (-_-;)
2)
プレイリスト画像の幅は、Playlist用CSSの .sv_playlist li {line-height:0; display:block; width:23%; ....を Width:17.3%に変更したら、一部不具合(5番目が4番目に何故か重なる)があるも調整出来た。
3)
配信用動画素材は、別のページで使用しているH.264/MP4(解像度720x408, 750Kbps)とVP8/WebM 動画(解像度640x360, 500Kbps)を指定した。
なお、動画の配信元は本ページとは別の未登録のサイトに所属していても構わない。
4)
残念ながら、プレイリストのタイトルを表記する機能は用意されていないので、title属性で画像についての補助説明をした。但し、この方策ではPCブラウザではマウスオーバーで表示可能だが、スマートフォンでは表現出来ない。
 
=成績=
Opera Mobile以外の全てのブラウザで、プレイリストの表示と再生が可能だった。
1) HTML5 ビデオ対応ブラウザ
Windows
・Windows 7のIExplorer 9, Chrome(24.0), Safari(5.1.7)及び Windows 8のIExplorer10メトロ版は、MP4をHTML5 ビデオとして再生。
・Windows 7のFirefox(20.0), Opera(12.12)は、WebMをHTML5 ビデオとして再生。
・Windows 7, 8用Firefox(21.0)は、H.264/MP4にも対応した \(^o^)/・・・Mac版やVista用Firefox(21.0)は、まだH.264/MP4に未対応。
なお、IExplorer, Firefoxはシークバーでスキップ再生可能だが、 Opera, Chrome, Safari はスキップ再生不可(一方、Mac版Safariではスキップ再生可能)。
スマートフォン
・Android(4.0.4)の標準ブラウザ, Chrome(18.0) は MP4をHTML5 ビデオとして、Firefox(21.0)は WebMをHTML5 ビデオとして再生。いずれもスキップ再生可能。
・Opera Mobile(12.1.4)は何故か 再生すら出来なかったが、Opera(14.0)ではMP4をHTML5 ビデオとして再生可能となった(スキップ再生も可能)。
・iPhone(iOS 6.0)のSafariは、QuickTimeで全画面表示で再生されスキップ再生不可。
2) HTML5 ビデオ未対応のFlash対応ブラウザ
Windows:XPの IExplorer 8は、Flash Player10.0以降インストール環境では MP4で再生可能だが、スキップ再生は不可。
3) 他のプレイリスト表示機能搭載のHTML5 Video Playerとの比較は、
 
プレイリストを右サイドに配置した場合の試験デモは、