スマート切り抜きビデオ smart-crop-video

スマート切り抜きビデオビューアは、ストリーミングビデオとプログレッシブビデオを H.264 形式でエンコードし、スマート切り抜きのサポートが追加された状態で再生します。 Dynamic Media Classicから、またはDynamic MediaとのExperience Managerから配信されます。

詳しくは、 必要システム構成と前提条件.

単一のビデオとアダプティブビデオセットの両方がサポートされています。 また、ビューアでは、外部でホストされているプログレッシブビデオおよび HLS ストリームの操作もサポートされています。 デスクトップとモバイル Web ブラウザーの両方で動作し、HTML5 ビデオをサポートするように設計されています。 このビューアは、ビデオコンテンツの上部に表示されるオプションのクローズドキャプション、ビデオチャプターナビゲーションおよびソーシャルメディア共有ツールもサポートしています。

スマート切り抜きビデオビューアは、基になるシステムが HLS 形式をサポートしている場合は常に、デフォルト設定で HLS 形式のHTML5 ストリーミングビデオ再生を使用します。 HTML5 ストリーミングをサポートしていないシステムでは、ビューアはHTML5 プログレッシブビデオ配信にフォールバックします。

ビューアタイプ 518

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS

スマート切り抜きビデオビューアの使用 section-f21ac23d3f6449ad9765588d69584772

スマート切り抜きビデオビューアは、メインの JavaScript ファイルとヘルパーファイルのセットです。1 つの JavaScript インクルードには、この特定のビューア、アセットおよびビューアが実行時にダウンロードするすべての Viewer SDK コンポーネントが含まれます。

IS-Viewers に付属する実稼動用のHTMLページを使用して、スマート切り抜きビデオビューアをポップアップモードで使用できます。 または、ビューアを埋め込みモードで使用し、ドキュメントに記載されている API を使用してターゲット Web ページに統合することもできます。

ビューアの設定とスキニングのタスクは、他のビューアと同様です。 スキニングはすべて、カスタム CSS を使用して行います。

詳しくは、 すべてのビューアに共通のコマンドリファレンス — 設定属性 および すべてのビューアに共通のコマンドリファレンス — URL

スマート切り抜きビデオビューアの操作 section-ab66eb6955aa4a8aa6d14a3b3acfed3f

スマート切り抜きビデオビューアは、ビデオ再生用の一連の標準的なユーザーインターフェイスコントロールを提供します。次に例を示します。

これらのコントロールはすべて、ビューアユーザインターフェイスの下部にあるコントロールバーにグループ化されています。

タッチデバイスでは、ハードウェアボタンを使用してのみボリュームを制御できるので、ボリューム制御はユーザーインターフェイスに表示されません。

ビューアがポップアップモードで動作している場合、ユーザーインターフェイスではフルスクリーンボタンを使用できません。

ビデオチャプターが有効になっている場合は、ビデオのコンテンツをすばやく移動できます。 ビデオチャプターは、ビデオスクラバートラック内にマーカーとして表示され、マウスのロールオーバー時、またはタッチシステムで 1 回タップしたときに、チャプタータイトルと関連する説明が表示されます。 チャプターマーカーを選択するか、チャプターの説明の吹き出しを選択することで、特定のチャプターを探すことができます。

タッチスクリーンとマウスを備えた Windows デバイスでは、タッチ入力とマウス入力の両方がサポートされます。 ただし、このサポートは、Chrome、Internet Explorer 11 および Edge Web ブラウザーにのみ制限されます。

このビューアは完全にキーボードでアクセス可能です。

詳しくは、 キーボードのアクセシビリティとナビゲーション.

スマート切り抜きビデオビューアを使用したソーシャルメディア共有ツール section-907d316fe1da4b87abb9775f02464704

スマート切り抜きビデオビューアは、ソーシャルメディア共有ツールをサポートしています。 これらは、ユーザーインターフェイスで 1 つのボタンとして使用でき、ユーザーがクリックまたはタップすると、共有ツールバーに展開されます。

共有ツールバーには、Facebook、Twitter、電子メール共有、埋め込みコード共有、リンク共有など、サポートされる共有チャネルの各タイプ用のアイコンが表示されます。 電子メール共有、埋め込み共有またはリンク共有のツールをアクティブにすると、ビューアにモーダルダイアログボックスが表示され、対応するデータ入力フォームが表示されます。 facebookまたはTwitterを呼び出すと、ソーシャルメディアサービスの標準の共有ダイアログボックスにリダイレクトされます。 また、共有ツールが有効になると、ビデオ再生が自動的に一時停止します。

Web ブラウザーのセキュリティ制限により、共有ツールはフルスクリーンモードでは使用できません。

スマート切り抜きビデオビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

ビューアの動作に対するニーズは、Web ページごとに異なります。 Web ページにリンクが表示され、このリンクを選択すると、別のブラウザーウィンドウでビューアが開く場合があります。 ホスティングページに直接ビューアを埋め込む必要がある場合もあります。 後者の場合は、Web ページが静的ページレイアウトである場合や、デバイスごと、ブラウザーウィンドウのサイズごとに表示方法が変わるレスポンシブデザインを使用する場合があります。 これらのニーズに対応するために、ビューアでは、ポップアップ、固定サイズ埋め込み、レスポンシブデザイン埋め込みの 3 つの主要な操作モードをサポートしています。

同じページへの複数のビデオの埋め込みは、タブレットとモバイルデバイスでサポートされています。 通常、一度に 1 つのビデオのみ再生できます。 ユーザーが 1 つのビデオの再生を開始し、別のビデオの再生を試みると、最初のビデオが自動的に一時停止します。 自動一時停止されたビデオは現在の再生時間を記憶するので、ユーザーはいつでも元に戻って再生を再開できます。 ただし、Android™ 4.x デバイスの Chrome ブラウザーでは、ビデオを並行して再生できる点が例外です。

ポップアップモードについて

ポップアップモードでは、ビューアは別の Web ブラウザーウィンドウまたはタブで開きます。 ブラウザーウィンドウの全領域を占め、ブラウザーのサイズやデバイスの向きが変更された場合は調整されます。

このモードは、モバイルデバイスで最も一般的なモードです。 Web ページでは、 window.open() JavaScript 呼び出し（適切に設定） A HTML要素、またはその他の適切な方法。

ポップアップ操作モードには、標準のHTMLページを使用することをお勧めします。 これは、と呼ばれます。 SmartCropVideoViewer.html そしてそれは以下の場所にある html5/ 標準の IS-Viewers デプロイメントのサブフォルダー

<s7viewers_root>/html5/SmartCropVideoViewer.html

カスタム CSS を適用することで、視覚的なカスタマイズを実現できます。

次に、ビューアを新しいウィンドウでHTMLする開封コードの例を示します。

<a href="http://s7d1.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS" target="_blank">Open popup viewer</a>

固定サイズ埋め込みモードとレスポンシブ埋め込みモードについて

埋め込みモードでは、ビューアは既存の Web ページに追加されます。ビューアに関連しない顧客コンテンツが既に存在する場合があります。 ビューアは、通常、Web ページの一部の領域のみを占有します。

主な使用例は、デスクトップやタブレットデバイス向けの Web ページと、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブデザインページです。

固定サイズ埋め込みは、初回の読み込み後にビューアのサイズが変更されない場合に使用します。 この選択は、静的ページレイアウトの Web ページに最適です。

レスポンシブデザイン埋め込みは、コンテナのサイズ変更に応じて実行時にビューアのサイズを変更する必要がある場合を想定しています DIV. 最も一般的な使用例は、柔軟なページレイアウトを使用する Web ページにビューアを追加する場合です。

レスポンシブデザイン埋め込みモードでは、Web ページによるコンテナのサイズ変更の方法によって、ビューアの動作が異なります DIV. Web ページでコンテナの幅のみが設定される場合 DIVで選択し、高さは無制限のままにし、使用するアセットの縦横比に従って、ビューアによって高さが自動的に選択されます。 この方法を使用すると、両側のパディングなしで、アセットが表示に完全に収まります。 この使用例は、Web ページで最も一般的なもので、Bootstrapや Foundation などのレスポンシブデザインレイアウトフレームワークを使用します。

それ以外の場合は、Web ページでビューアのコンテナの幅と高さの両方が設定されている場合 DIVを指定した場合、ビューアはその領域だけを埋め、Web ページレイアウトで指定されたサイズに従います。 良い例として、ビューアをモーダルオーバーレイに埋め込み、オーバーレイが Web ブラウザーウィンドウのサイズに従ってサイズ変更される場合があります。

固定サイズ埋め込み

ビューアを Web ページに追加するには、次の手順を実行します。

<s7viewers_root>/html5/js/SmartCropVideoViewer.js

ビューアがいずれかのAdobe Dynamic Media Classicサーバーにデプロイされ、同じドメインから提供されている場合は、相対パスを使用できます。 それ以外の場合は、IS-Viewers がインストールされているAdobe Dynamic Media Classicのいずれかのサーバーへのフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/SmartCropVideoViewer.js"></script>

高さ無制限のレスポンシブデザイン埋め込み

レスポンシブデザイン埋め込みでは、Web ページには通常、ビューアのコンテナの実行時のサイズを指示する柔軟なレイアウトが指定されています DIV. この例では、Web ページがビューアのコンテナを許可しているとします。 DIV を使用すると、web ブラウザーのウィンドウサイズの 40%を占め、高さは無制限のままになります。 Web ページのHTMLコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページへのビューアの追加方法は、固定サイズ埋め込みの場合と似ています。唯一の違いは、ビューアのサイズを明示的に定義する必要がないことです。

上記の手順はすべて、固定サイズ埋め込みの場合と同じです。 コンテナを追加 DIV 既存の「所有者」に対して DIV. 次のコードは完全な例です。 ブラウザーのサイズ変更時にビューアのサイズがどのように変化するか、およびビューアの縦横比がアセットとどのように一致するかを確認できます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

以下のサンプルページでは、高さ無制限のレスポンシブデザイン埋め込みの、より実際に使用される例を示します。

ライブデモ

代替のデモの場所

幅と高さが定義されたレスポンシブデザイン埋め込み

幅と高さが定義されたレスポンシブデザイン埋め込みがある場合、Web ページのスタイル設定は異なります。両方のサイズが「holder」に提供されます DIV ブラウザーウィンドウの中央に配置します。 また、Web ページでは HTML および BODY 要素を 100%に変更：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込み手順は、高さ無制限のレスポンシブデザイン埋め込みと同じです。 結果の例は次のようになります。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

セッターベースの API を使用した埋め込み

JSON ベースの初期化を使用する代わりに、セッターベースの API と no-args コンストラクターを使用できます。 この API では、コンストラクターはパラメーターを受け取らず、設定パラメーターは setContainerId(), setParam()、および setAsset() API メソッドを個別の JavaScript 呼び出しで使用できます。

次の例は、セッターベースの API を使用した固定サイズ埋め込みを示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7videoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer();
smartCropVideoViewer.setContainerId("s7viewer");
smartCropVideoViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
smartCropVideoViewer.setParam("videoserverurl", "http://s7d1.scene7.com/is/content/");
smartCropVideoViewer.setAsset("html5automation/frisbee-AVS");
smartCropVideoViewer.init();
</script>
</body>
</html>