ここでは、EQプレイヤーの標準機能では対応できない表示や操作を実現するために、カスタマイズされたプレイヤーのサンプル集をご紹介しています。
各ページに掲載されているサンプルのソースコードは、そのままご利用いただいても問題ありません。
ただし、細かな調整や修正が必要になる場合がありますので、JavaScriptやCSSなどのWeb技術に関する基本的な知識をお持ちいただくと、より安心してご活用いただけます。
なお、弊社が提供するAPIについてはサポート対象となりますが、JavaScriptやCSSなどのWeb技術に関する知識そのものについてはサポートの範囲外となります。あらかじめご了承ください。
プレイリスト型プレイヤー
複数の動画をグループ化し、リスト形式で表示・再生
このサンプルの主な利用シーン:製品ラインアップ紹介等
複数の製品を順番に紹介する動画をまとめて再生
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/player_playlist.html?mid=1
プレイリストタブ型プレイヤー
動画をタブ形式で分類し、リスト形式で表示・再生
このサンプルの主な利用シーン:部門別研修等
営業部・開発部・人事部など、部署ごとに必要な研修動画を整理して再生
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/player_playlist_tab.html?mid=1
プレイリストタブ型プレイヤー 登録日ソート付
動画をタブ形式で分類し、登録日順でソート可能
このサンプルの主な利用シーン:カテゴリ別FAQ動画を新着順に表示等
「ログイン関連」「操作方法」「トラブル対応」などのカテゴリで分け、最近追加されたFAQ動画をすぐに見つけられる
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/player_playlist_tab_sort.html?mid=1
キーワード検索型プレイヤー
APIリファレンスコードに設定したキーワードで動画を検索・表示
このサンプルの主な利用シーン:製品・サービス紹介動画の検索等
製品名や機能名(例:「テレビ」「冷蔵庫」)で検索し、関連動画を表示
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/player_keyword.html
ePreプレイヤー
ePreCreator(スライド連携用ツール)を使用して生成したプレイヤー
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/epre.html
インデックスプレイヤー
動画をチャプターごとに分け、選択再生が可能
このサンプルの主な利用シーン:教育・研修動画等
長時間の講義や研修動画を「導入」「理論」「実践」「まとめ」などに分割し受講者が必要な部分だけを効率よく視聴可能
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/chapter.html
アイテムシンクロ型プレイヤー
再生時間に合わせて、任意のアイテム(画像・テキストなど)を表示
このサンプルの主な利用シーン:動画の再生時間に合わせて、関連資料・リンク・画像などの表示等
製品紹介動画で、該当機能の説明時にその機能の詳細資料を表示
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/cuepoint.html
クローズド・キャプション(字幕)プレイヤー
再生時間に合わせて、字幕をプレイヤー外に表示
このサンプルの主な利用シーン:デザインや配置の自由度を高めたい等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/cc.html
ループ再生プレイヤー
動画を繰り返し再生
このサンプルの主な利用シーン:店頭サイネージ、展示会での製品紹介ループ等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/loop.html
再生完了後バナー表示プレイヤー
再生完了後に、プレイヤー下部にバナーを表示
このサンプルの主な利用シーン:プロモーション動画の後に、購入リンクや問い合わせ先を表示等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/completeBanner.html
再生終了後ジャンプ
再生完了後に、プレイヤー内部に別ページを表示
このサンプルの主な利用シーン:研修動画終了後にアンケートページへ誘導等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/jump.html
mediaboxプレイヤー
モーダルウィンドウ内で動画を再生
このサンプルの主な利用シーン:製品ページ内で詳細動画をモーダル表示
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/mediabox.html
Colorboxプレイヤー
モーダルウィンドウ内で動画を再生
このサンプルの主な利用シーン:製品ページ内で詳細動画をモーダル表示
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/colorbox.html
マルチファンクションプレイヤー
カスタムサムネイルやボタン制御付き
このサンプルの主な利用シーン:ブランドイメージに合わせたUI演出等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/multifunction.html
プレイヤーサイズ動的変換
JavaScriptでサイズを動的に変更
このサンプルの主な利用シーン:ユーザー操作に応じて表示サイズを切り替える等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/playersize_dynamic.html
動画を背景にする
EQプレイヤーを背景動画として使用
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/background.html
フルスクリーンプレイヤー
JavaScriptで疑似的にフルスクリーン化
このサンプルの主な利用シーン:iOS、iPadOS端末のフルスクリーン時
iOSおよびiPadOS端末でフルスクリーンにすると端末の標準メディアプレイヤーが起動するが、EQプレイヤーの各ボタンや関連リンクなどの機能を維持したままフルスクリーン表示したい際に活用
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/fullscreen.html
ユーザー別視聴解析(旧名 カスタム解析変数)を利用して、固有情報を取得する
固有(ユーザーID等)の視聴情報を取得して視聴解析に活用
このサンプルの主な利用シーン:社内研修・eラーニング等
受講者ごとの視聴履歴を記録し、研修の進捗管理や受講完了の確認に活用
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/custom_ua.html
EQライブのプレイヤー及びチャットの配置サンプル
画面サイズに応じてレイアウトを変更
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/live_player_chat.html
高さ540pxを超える大きな画像をサムネイル画像に設定する
高さ540px超の画像をサムネイルに設定する方法
※EQでは高さ540pxを超える大きな画像を任意サムネイルに登録した場合、
高さ540pxまで縮小して設定される仕様のため
(参考:「提供機能」‐「■アップロードサムネイル画像の推奨仕様」)
このサンプルの主な利用シーン:高解像度のサムネイル画像の表示等
https://tech-support.cdnext.stream.ne.jp/equipmedia/player/thumbnail_cover.html