ログイン
MP4を指定した単純なHTMLのvideoタグは、10秒のループ動画なら使えますが、それ以上は通用しません。大きなファイルは低速回線で止まり、ブラウザーごとに形式が異なり、再生のたびに自分のウェブホストが帯域の費用を負担します。埋め込みプレーヤーならこれが逆転します。ファイルはFileHost.netに置かれ、ストリームは視聴者の回線に合わせて調整され、ページに必要なのは小さなiframeだけです。
再生はVideo.jsベースのプレーヤーで、HLSでストリーミングされます。全画面表示、再生速度メニュー、再生・シーク・音量・ミュート・全画面のキーボードショートカット、ページを暗くするシネマモード、アップロード後に自動生成されるタイムライン上のホバーサムネイルが使えます。字幕は45言語からSRTファイルで追加でき、字幕トラックをオンにした状態でプレーヤーを開始することもできます。
オーナーは、埋め込みの幅と高さの設定、独自ロゴの追加、スプラッシュ画像やポスター画像の選択ができ、プレミアムならサイトに合わせてプレーヤーの色も変更できます。上級ユーザーは、ダッシュボードからVAST広告タグやポップ設定を連携できます。
願望リストではなく、プレーヤーのコードで確認した内容です。
セグメント配信により、長い動画でもすばやく再生が始まり、スムーズにシークできます。
言語ごとにSRTトラックを読み込み、プレーヤーからオンにしたり、字幕を有効にした状態で開始したりできます。
速度メニューとキーボード操作で、再生、シーク、音量、ミュート、全画面、シネマモードを操作できます。
周囲のページを暗くして動画を主役にし、キー1つで元に戻せます。
ホバー時のサムネイルは処理中に作成されるため、視聴者は迷わず目的のシーンを探せます。
ロゴの追加、ポスターの選択、埋め込みサイズの設定ができ、プレミアムならプレーヤーの色も選べます。
ダッシュボードが生成するコードの構造です。コード部分をご自身の動画の公開IDに置き換えてください。
<iframe width="600" height="480" src="https://filehost.net/e/YOUR_CODE" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>小さなラッパーを使うと、どの画面幅でも16:9の形を保てます。スタイルシートに追加し、中に同じiframeを入れてください。
<div style="position:relative;aspect-ratio:16/9;max-width:100%">
<iframe src="https://filehost.net/e/YOUR_CODE"
style="position:absolute;inset:0;width:100%;height:100%;border:0"
allowfullscreen="true"></iframe>
</div>iframeはご自身のスクリプトから独立しているため、レイアウトを重くしたりテーマと衝突したりしませんが、検索エンジンは動画を埋め込み元のアドレスのものとして扱います。コンテンツが検索で評価されるよう、ご自身のページに説明的な見出し、短い要約、文字起こしを添えてください。動画がファーストビューの下にある場合は、iframeにloading属性をlazyに設定して追加します。
負荷の大きい処理は別の場所で行われるため、アクセスが急増してもホスティング費用は変わりません。これは、共有ホスティングを使う小規模サイトにとって最大の実用的なメリットです。
埋め込みプレーヤーでの再生も、視聴ページと同じ単価で収益にカウントされるため、人気の記事なら動画だけで元が取れることもあります。プレーヤー内で独自のVAST広告を配信することもできますが、独自広告の配信中のトラフィックはプレミアム帯域から消費され、1テラバイトあたり一律$2がかかります。事業計画を立てる前に収益のルールをお読みください。
プレーヤーが空白の枠になる場合は、ページがコンテンツセキュリティポリシーでサードパーティのフレームをブロックしていないか確認してください。字幕が表示されない場合は、トラックが正しい動画に追加されていて、SRT形式であることを確認してください。スマホでページの表示が崩れる場合は、固定の幅と高さを上記のレスポンシブラッパーに置き換えてください。
ドライブ型サービスからの埋め込みは、不格好なプレビュー枠になりがちです。プレーヤーの違いをご覧ください。