2016年1月 – ページ 3 – 端くれプログラマの備忘録

[HTML5] FirefoxでJWPlayerの動画再生が始まらない

2016年1月11日2016年2月28日 @84kure

症状

– 再生ボタンをクリックすると動画冒頭が表示されるが先に進まない
– 画面中心にぐるぐる回るインジケータが表示されたまま
– 再生時刻は00:00のまま変化せず
– タイムスライダを僅かでもドラッグすれば再生が始まる

条件

– Firefox 43.0.4 (たぶんバージョンに依存しない)
– MP4 H.265/AAC
– JWPlayer 7.2.4
– JWPlayerのオプション
– autostart false (デフォルト)
– primary html5 (デフォルト)

原因を調べる

サーバーに依存するか？
– 複数のサーバーで試す (Nginx & Apache、ローカルでも)
– サーバーが変わっても同じ症状

動画ファイルに依存するか？
– ファイルサイズがおよそ8MBを超えると再生されない
– Firefoxの開発者ツールで調べたら
– サイズが小さい動画はJWPlayerロード時にダウンロード完了する
– 故に、再生時にはブラウザのキャッシュにある動画ファイルを再生している
– 再生開始時に動画のダウンロードを伴うケースに再生されないみたい

HTML5の代わりにFlashを使うとどうなるか?
– JWPlayerのprimaryオプションを”flash”に変更 (Flashが使える場合はFlash優先)
– すると問題は解決 (正常に再生スタートするようになった)
– Firefoxの動画プレイヤー(videoタグ)の実装に問題があるみたい

JWPlayer開発元はFirefoxをどう扱っているのか?
– JWPlayerが提供するCDNに動画をアップして再生してみる
– JWPlayerを右クリックすると「Flash Version 2.0」との表示。
– JWPlayer任せだと、FirefoxではHTML5ではなくFlashが優先的に使われるみたい

結論

– FirefoxのHTML5ビデオ再生とJWPlayerには相性の問題あり
– 故に、FirefoxでJWPlayerを使うときはFlashを使うこと

たわごと

– 以前にHTML5の動画再生中に飛んでくるイベントをダンプしたことがあった
– Google Chromeと比べてFirefoxのイベントは少なかったような記憶がある(うる覚え)
– JWPlayerで再生ボタンを押しても、Firefoxからの再生開始の通知が正しくされないのかも(あくまで予想)

[HTML5] JWPlayerで字幕を表示する

2016年1月10日2016年2月13日 @84kure

以下に解説あり。

Adding Closed Captions | JW Player
https://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions

字幕データはVTT形式で用意する

JWPlayerがサポートする字幕ファイル形式はWebVTTとSRTの2種類。

WebVTT: The Web Video Text Tracks Format
https://w3c.github.io/webvtt/

SubRip – Wikipedia, the free encyclopedia
https://en.wikipedia.org/wiki/SubRip

推奨はVTT形式。理由はHTML5標準で広くブラウザでサポートされていること。iOSのフルスクリーンではVTTであることが必須らしい。書き方はSubRipと大して変わらないので、SubRip形式があればVTT形式に直すことは容易そう。

WEBVTT

00:00:12.000 --> 00:00:15.000
What brings you to the land
of the gatekeepers?

00:00:18.500 --> 00:00:20.500
I'm searching for someone.

00:00:36.500 --> 00:00:39.000
A dangerous quest for a lone hunter.

00:00:41.500 --> 00:00:44.000
I've been alone for as long
as I can remember.

00:00:12.000 --> 00:00:15.000

What brings you to the land

of the gatekeepers?

00:00:18.500 --> 00:00:20.500

I'm searching for someone.

00:00:36.500 --> 00:00:39.000

A dangerous quest for a lone hunter.

00:00:41.500 --> 00:00:44.000

I've been alone for as long

as I can remember.

JWPlayerオプション指定

少しのオプション指定の追加で割と容易にキャプションを追加できる。

var playerInstance = jwplayer("myElement")
playerInstance.setup({
    playlist: [{
        file: "/assets/sintel.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{
            file: "/assets/captions-en.vtt",
            label: "English",
            kind: "captions",
            "default": true
        },{
            file: "/assets/captions-fr.vtt",
            kind: "captions",
            label: "French"
        }]
    }]
});

var playerInstance = jwplayer("myElement")

playerInstance.setup({

playlist: [{

file: "/assets/sintel.mp4",

image: "/assets/sintel.jpg",

tracks: [{

file: "/assets/captions-en.vtt",

label: "English",

kind: "captions",

"default": true

},{

file: "/assets/captions-fr.vtt",

kind: "captions",

label: "French"

}]

});

試してみたらいい感じだった。

[Webサイト制作] 特定のCSSやJSファイルを強制リロードさせるには

2016年1月9日2016年2月13日 @84kure

ファイル名を変えればブラウザは違うファイルと認識してロードしてくれる。だけど、CSSを編集するたびにCSSファイル名を変えるのは手間。

そこで、以下のようにCSSのURLにクエリ文字列を付加しておくと、ファイル名は同じでもクエリ文字列が変わるとCSSが再ロードされるらしい。

<link rel="stylesheet" type="text/css" href="/css/style.css?123456" />

1	<link rel="stylesheet" type="text/css" href="/css/style.css?123456" />

これを利用すれば、ページがロードされるたびにクエリ文字列を変化させることで、常にCSSをキャッシュさせないようにできそう。

<link rel="stylesheet" type="text/css" href="/css/style.css?<?php time(); ?>" />

1	<link rel="stylesheet" type="text/css" href="/css/style.css?<?php time(); ?>" />

参考サイト

CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか: 小粋空間
http://www.koikikukan.com/archives/2011/08/29-015555.php

WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする – かちびと.net
http://kachibito.net/wordpress/prevent-css-caching.html

[Webサイト制作] ブラウザのキャッシュを無効化する方法

2016年1月8日2016年2月13日 @84kure

ウェブサーバーとブラウザの設定はいじらない前提。すなわち、サーバー管理者やユーザに委ねずに制作者だけで可能な方法。

実際に試したわけじゃないけど、たぶん。ブラウザによって癖がありそうだけど。

HTMLにMETAタグを追加する

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">

サーバー側プログラムでヘッダを付加する

header("Content-Type: text/html; charset=文字コード");
header("Expires: Thu, 01 Dec 1994 16:00:00 GMT");
header("Last-Modified: ". gmdate("D, d M Y H:i:s"). " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

header("Content-Type: text/html; charset=文字コード");

header("Expires: Thu, 01 Dec 1994 16:00:00 GMT");

header("Last-Modified: ". gmdate("D, d M Y H:i:s"). " GMT");

header("Cache-Control: no-cache, must-revalidate");

header("Cache-Control: post-check=0, pre-check=0", false);

header("Pragma: no-cache");

参考サイト

ブラウザのキャッシュを制御する/no-cache
http://tech.bayashi.net/pdmemo/browsercache.html

【php】ブラウザにキャッシュしてもらうhttpヘッダ at softelメモ
https://www.softel.co.jp/blogs/tech/archives/2311

[Webサイト制作] HTTPレスポンスのExpiresを考察する

2016年1月7日2016年2月13日 @84kure

CSSを変更してディプロイしてもページの体裁が変わらない。ブラウザでF5キーで強制リロードすると体裁が変わる。と、デザイナから報告あり。たぶんブラウザのキャッシュに関係した問題。

まずはHTMLのMETAタグにキャッシュ絡みの記述が無いか探すが見つからず。

次はHTTPレスポンスのダンプ。

http://example.com/css/styles.css

Cache-Control:"public, max-age=315360000"
Date:"Wed, 10 Feb 2016 19:05:33 GMT"
Etag:""56b913a1-b8c4""
Expires:"Thu, 31 Dec 2037 23:55:55 GMT"
Last-Modified:"Mon, 08 Feb 2016 22:16:01 GMT"
Server:"nginx/1.4.1"

Cache-Control:"public, max-age=315360000"

Date:"Wed, 10 Feb 2016 19:05:33 GMT"

Etag:""56b913a1-b8c4""

Expires:"Thu, 31 Dec 2037 23:55:55 GMT"

Last-Modified:"Mon, 08 Feb 2016 22:16:01 GMT"

Server:"nginx/1.4.1"

http://example.com/images/pic1.jpg

Cache-Control:"public, max-age=315360000"
Date:"Wed, 10 Feb 2016 19:09:42 GMT"
Etag:""56abfd63-e04d""
Expires:"Thu, 31 Dec 2037 23:55:55 GMT"
Last-Modified:"Sat, 30 Jan 2016 00:01:39 GMT"
Server:"nginx/1.4.1"

Cache-Control:"public, max-age=315360000"

Date:"Wed, 10 Feb 2016 19:09:42 GMT"

Etag:""56abfd63-e04d""

Expires:"Thu, 31 Dec 2037 23:55:55 GMT"

Last-Modified:"Sat, 30 Jan 2016 00:01:39 GMT"

Server:"nginx/1.4.1"

Expiresの315360000秒(10年)は長すぎないか。試しにjQueryを調べる。

http://code.jquery.com/ui/1.10.3/jquery-ui.js

Access-Control-Allow-Origin:"*"
Cache-Control:"max-age=315360000, public"
Connection:"keep-alive"
Content-Encoding:"gzip"
Content-Type:"application/javascript; charset=utf-8"
Date:"Wed, 10 Feb 2016 19:09:00 GMT"
Etag:""54499a48-6a684""
Expires:"Thu, 31 Dec 2037 23:55:55 GMT"
Last-Modified:"Fri, 24 Oct 2014 00:16:08 GMT"
Server:"NetDNA-cache/2.2"
Vary:"Accept-Encoding"
X-Cache:"HIT"

Access-Control-Allow-Origin:"*"

Cache-Control:"max-age=315360000, public"

Connection:"keep-alive"

Content-Encoding:"gzip"

Content-Type:"application/javascript; charset=utf-8"

Date:"Wed, 10 Feb 2016 19:09:00 GMT"

Etag:""54499a48-6a684""

Expires:"Thu, 31 Dec 2037 23:55:55 GMT"

Last-Modified:"Fri, 24 Oct 2014 00:16:08 GMT"

Server:"NetDNA-cache/2.2"

Vary:"Accept-Encoding"

X-Cache:"HIT"

jQueryもExpiresは10年だった。だけどjQueryはバージョンごとに凍結されているから、キャッシュを更新する心配はなさそう。自前のコードの場合はそうはいかないよな。鯖管の独断でExpiresを設定された弊害が出てる感じ。クレームしよ。

参考サイト

HTTPヘッダチューニング Expiresヘッダについて | REDBOX Labo
http://blog.redbox.ne.jp/http-header-expires.html

Expiresヘッダーを活用してサイトの読込速度を上げてみる | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
http://www.aiship.jp/knowhow/archives/20552

[動画処理] Adobe Premiereで字幕を合成する

2016年1月6日2016年2月13日 @84kure

Adobe Premiereを使って字幕を合成した動画を作成するにはどうするか。実際の作業予定は無いけど、気になったので調べておく。

YouTubeにはHow-Toビデオがいろいろあるけど、とりあえず以下の２つのワークフローに着目メモ。

Adobe Premiere Pro CC Tutorial | Importing Or Adding Closed Captions To Projects – YouTube
https://www.youtube.com/watch?v=SSsA89PRncw

1. テキストを起こす (Subtitle Workshop)
2. 字幕だけの映像トラックを作る (Lemony Subtitler)
3. 本編トラックに字幕トラックを合成する (Adobe Premiere)

Adobe Premiere Pro CC Tutorial | Importing Or Adding Closed Captions To Projects – YouTube
https://www.youtube.com/watch?v=SSsA89PRncw

1. 字幕データをSCCファイルで用意する
2. SCCファイルをインポートして合成する (Adobe Premiere)

[動画処理] Subtitle Workshop – 字幕データ作成支援ソフト

2016年1月5日2016年5月3日 @84kure

字幕データ作成に便利なソフトを探してみる。

Subtitle Workshopがよさげか。オープンソースの字幕データ作成支援ソフト。動画をプレビューしながら字幕の表示開始/終了位置を決めて字幕テキストを入力していき、60種類を超える字幕データ形式で保存できる。

Home – Subtitle Workshop
http://subworkshop.sourceforge.net/

[動画処理] 動画プレイヤーで字幕を表示する

2016年1月4日2016年2月13日 @84kure

日本語トークを含む動画に英語字幕を付けたい。だけど、できれば動画ファイルはいじりたくない。字幕を合成して再エンコードするのは手間なので。

動画プレイヤーの字幕表示機能

聞きかじったところでは動画プレイヤー自体に機能があるらしいので、著名なプレイヤーの公式サイトで情報収集。

How to enable/use subtitles – What can VLC do? – VideoLAN Wiki
https://wiki.videolan.org/What_can_vlc_do/#How_to_enable.2Fuse_subtitles

Subtitles – VideoLAN Wiki
https://wiki.videolan.org/Subtitle/

字幕ファイルの再生方法 | サポート > FAQ – GOM Player【ゴムプレーヤー】
http://www.gomplayer.jp/player/faq/view.html?intSeq=58

字幕ファイルの作成方法 | サポート > FAQ – GOM Player【ゴムプレーヤー】
http://www.gomplayer.jp/player/faq/view.html?intSeq=57

字幕データを外部ファイルとして用意すれば、動画プレイヤーが重ねて表示してくれるらしい。

SubRip 字幕ファイル形式

字幕データには様々な形式があるが、SubRipがもっともメジャーっぽい。

SubRip – Wikipedia, the free encyclopedia
https://en.wikipedia.org/wiki/SubRip

字幕の表示開始/終了時刻とテキストを羅列しただけのシンプルなフォーマット。テキストファイルなのでエディタで作成できる。

YouTubeに実際に作成しているスクリーンキャストがあった。

How To Make & Load Subtitles (SRT) for Movies VLC Media Player – YouTube
https://www.youtube.com/watch?v=6YxWm1dkHKk

作業的にはかなりの手間だな。

試しにSubRip形式の字幕データを自作して試してみた。VLCプレイヤーとGOMプレイヤーの両方で字幕が表示できた。技術面ではクリアになったけど、字幕作成の手間をいかに軽減するかが課題だな。

[動画処理] Androidで再生できるMP4の要件

2016年1月3日2016年2月13日 @84kure

サイトに載せた動画がGalaxyで再生できないとの報告あり。スマホ対応を正式には謳っていないのだけど、このご時勢、ゆくゆくは正式にスマホ対応を謳っていかないとならない。そこでネットでAndroidで再生できるMP4の要件を探してみたのだけど、なかなか見つからない。

やっとそれらしいものが見つかったので覚え書きリンク。

Supported Media Formats | Android Developers
http://developer.android.com/intl/ja/guide/appendix/media-formats.html

あと、Galaxy向けのMP4について書いたサイトがあったので併せてリンク。

How to Play MP4 on Samsung Galaxy S4/S3/S2/Tab/Note/Ace? » TechiSky
http://www.techisky.com/how-to/how-to-play-mp4-on-samsung-galaxy-s4-s3-s2-tab-note-ace.html

[Vagrant] vagrant upがタイムアウトになるときの対処法

2016年1月2日2016年2月4日 @84kure

Vagrantbox.esからWindows Vista with IE7 (32bit)をゲットして立ち上げたらタイムアウトになった。Windows系のBoxだと、立ち上がりに時間が掛かるのだろう。

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'vista-ie7'...
==> default: Matching MAC address for NAT networking...
==> default: Setting the name of the VM: vista-ie7_default_1454528248664_66668
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
Timed out while waiting for the machine to boot. This means that
Vagrant was unable to communicate with the guest machine within
the configured ("config.vm.boot_timeout" value) time period.

If you look above, you should be able to see the error(s) that
Vagrant had when attempting to connect to the machine. These errors
are usually good hints as to what may be wrong.

If you're using a custom box, make sure that networking is properly
working and you're able to connect to the machine. It is a common
problem that networking isn't setup properly in these boxes.
Verify that authentication configurations are also setup properly,
as well.

If the box appears to be booting properly, you may want to increase
the timeout ("config.vm.boot_timeout") value.

$ vagrant up

Bringing machine 'default' up with 'virtualbox' provider...

==> default: Importing base box 'vista-ie7'...

==> default: Matching MAC address for NAT networking...

==> default: Setting the name of the VM: vista-ie7_default_1454528248664_66668

==> default: Clearing any previously set network interfaces...

==> default: Preparing network interfaces based on configuration...

default: Adapter 1: nat

==> default: Forwarding ports...

default: 22 (guest) => 2222 (host) (adapter 1)

==> default: Booting VM...

==> default: Waiting for machine to boot. This may take a few minutes...

default: SSH address: 127.0.0.1:2222

default: SSH username: vagrant

default: SSH auth method: private key

Timed out while waiting for the machine to boot. This means that

Vagrant was unable to communicate with the guest machine within

the configured ("config.vm.boot_timeout" value) time period.

If you look above, you should be able to see the error(s) that

Vagrant had when attempting to connect to the machine. These errors

are usually good hints as to what may be wrong.

If you're using a custom box, make sure that networking is properly

working and you're able to connect to the machine. It is a common

problem that networking isn't setup properly in these boxes.

Verify that authentication configurations are also setup properly,

as well.

If the box appears to be booting properly, you may want to increase

the timeout ("config.vm.boot_timeout") value.

タイムアウトを延ばすには、Vagrantfileに以下の設定を追加する。

config.vm.boot_timeout = 600

1	config.vm.boot_timeout = 600

単位は秒で、デフォルトは300秒。

参考サイト

config.vm – Vagrantfile – Vagrant by HashiCorp
https://www.vagrantup.com/docs/vagrantfile/machine_settings.html