デジタルサイネージ用にローカル保存した動画をブラウザで再生する 

デジタルサイネージ用にローカル保存した動画データをWEBブラウザで再生する

 
デジタルサイネージ用にローカル保存した動画データをWEBブラウザで再生する

この記事では、ローカル保存している動画データを
WEBブラウザで再生する方法を紹介します。
 

↑フルスクリーンのGoogleChromeで縦型動画を再生中
 
YouTubeの埋め込みプレーヤーは便利ですが、
高画質の動画を再生できない場合があります。
(タグで指定しても再生環境やサーバー状況によっては高画質再生されない)
ローカル保存したデータであれば、最高画質の動画を安定して再生できます。
 

<video>タグを使って動画を埋め込む


Google Chromeや最新のIE等、HTML5対応のブラウザであれば、
<video>タグを使ってブラウザで動画が再生できます。
※この記事では、GoogleChromeを使って解説しています。
 
例:
<video width="640" height="480" autoplay loop controls>
<source src="ローカル保存した動画のURL">
</video>
 
タグの属性:
width……動画の幅
height……動画の高さ
autoplay……自動再生
loop……繰り返し再生
controls……操作コンソールの表示
 


ローカル保存した動画URLの確認方法


①デジタルサイネージ用に使うWEBブラウザに保存場所からドラッグします。
②動画の再生を確認します。再生しない場合は動画形式を変更する必要があります。
③ウインドウに出ているURLをコピーします。
 
ローカル保存した動画URLの確認方法

 
 
 
※横型の動画を貼り付ける場合、作業は以上です。
以降の記事は縦型の動画をWEBブラウザに貼り付ける場合の作業を紹介します。
 
 
 

縦型動画をWEBブラウザで表示する


ブラウザで縦型の動画を表示する場合は、
動画を適切な方向に回転する必要があります。
(最初から方向が適切であれば、これらの操作は必要ありません)
以下2つの方法を解説します。
①CSSを使ってWEBブラウザで動画を回転する
②編集ソフトを使って動画データを回転する
 


①CSSを使ってWEBブラウザで動画を回転する


※以下の構文はChromeでの再生を前提としています。
 
ブラウザはプレーヤーでこのように表示される動画を……。

ブラウザやプレーヤーでこのように表示される動画を……。
 
90度回転してWEBブラウザ上で表示したい。

90度回転してWEBブラウザ上で ローカル再生 したい。
(今回はYouTubeを使わない)
 
 
CSS&HTML構文の例:
 
図の動画を時計回りに90度回転して
1920×1080pixの縦型モニタでブラウザに表示する場合
 
----------------------------------------------------------------------
<html>
<head>
<title>動画縦配置</title>
 
<style type="text/css">
p.kaiten {
/* ■90度回転する */
-webkit-transform: rotate( 90deg );
/* ■動画の上部左を軸に回転する */
-webkit-transform-origin: top left;
/* ■Chromeを1920*1080画面でフルスクリーン表示した場合の配置 */
position: fixed;
top: -16px;
right: 18px;
width: 0px;
}
/* ■HD動画を配置した場合の左右空きを黒色に変更 */
body {background-color: black;}
</style>
</head>
 
<body>
<p class="kaiten">
 
<video width="1856" height="1044" autoplay controls loop>
<source src=" ローカル保存の動画URL ">
</video>
 
</p>
</body>
</html>
----------------------------------------------------------------------
上記の構文で実際に動画を配置した例です。

1920×1080pixモニターの縦型画面(アイキャッチXと同じ)に
WEBブラウザをフルスクリーン表示した上で、
フルHDの動画をやや縮小して再生しています。
※Windowsを縦画面にする方法はこちらの記事の(3)
 
 
また、ブラウザに貼り付ける動画サイズによって配置が変わりますので、
 position: fixed;
 top: -16px;
 right: 18px;
 width: 0px;
の数値を実際の画面に合わせて調整します。
 
 
 

②動画編集ソフトを使って動画データを回転する


「Avidemux」というフリーの動画編集ソフトで動画データを回転します。
高機能なソフトなので、普段使いのソフトにしても良いと思います。
本格的に使う場合はこちらのサイトから日本語化ファイルを入手します。
今回は動画の回転のみに使いますので、英語表記のまま進めます。
 


■導入


(1)Avidemuxをダウンロード

win32bit版はこちら
win64bit版はこちら
サイトにアクセスすると自動的にダウンロードが始まります。
ダウンロードが始まらない場合は、画像の赤枠部分「direct link」をクリック。
 
32bit、64bitはお使いのOSでお選びください。
分からない場合は32bitをダウンロードすればOKです。
 
 
(2)インストール作業

ダウンロードしたファイルをダブルクリック
 
 

next を押す
 
 

I Agree を押す
 
 

Standard のまま Next を押す
 
 

チェックを入れたまま Next を押す
 
 

Next を押す
 
 

Install を押す
 
 

Finish を押す
Run…にチェックを入れていると、自動的にソフトが起動する
View…更新履歴表示、チェックを外してもかまわない
 
 

■動画の回転操作


(1)Avidemux を起動

 
 
(2)回転したいファイルを開く

 
 
(3)ファイルの読み込みを待つ

 
 
(3)video → Filters を選ぶ

 
 
(4)Transform → Rotate を選びダブルクリック

 
 
(5)動画の回転角度を選ぶ
時計回りに90度回転する場合は「270degrees」

 
 
(6)Preview を押して変更を確認

 
OKで戻る
 
 
(7)Close を押してフィルターマネージャーを閉じる

 
 
(8)①上部のアイコンを押して ②下部の再生ボタンで確認

 
 
(9)出力を設定
Video Output……Mpeg4 AVC(x264)
Audio Output……Copy
Output Format……MP4v2 Muxer

 
 
(10)動画を保存

 
ファイル名は半角英数字 ファイルの種類はそのまま

 
 
(11)出力中が完了したら OK を押す

 

 
 
(12)Chromeにファイルをドラッグして再生すれば変換成功

 
 
(13)<video>タグでHTMLを設定する
例:

<video width="1080 height="1920" autoplay loop controls>
<source src="動画URL">
</video>
 
縦横比がずれると、動画が変形するので注意
16:9の動画の縦横比例
width  height
1080  1920
540   960
360   640
225   400

 
CSSと動画データの変換、どちらが簡単?
 
■CSSで回転
一方CSSで動画を回転すると、動画データの劣化を最小限に抑えられます。
(動画は変換する度に画質が劣化します)
CSSの設定に慣れれば、動画データの変換より早く作業できます。
 
■動画データの変換
最初の変換は面倒ですが、動画データを縦に回転しておくと、
HTMLタグだけで調整ができるので、後々の作業が楽です。
 
ちなみに、私(森内)は動画データを変換するタイプです。
レイアウトを試行錯誤する場合は、動画データが縦の方が何かと便利です。

デジタルサイネージ

 

素材配布

 

動画制作

  

YouTube活用

 

ソフト&ガジェット

 

コラム

 

 疑問に答えます