メインコンテンツへスキップ

ステップ1:設定-動画プレーヤータグを設置する

ステップ1:設定-動画プレーヤータグを設置する
動画プレーヤーを設置する動画プレーヤーを設置するSMP内の公開ページに設置するタグを使用して設置する$FORMを使用して設置する外部サイト上に設置する動画プレーヤーを設置する動画プレーヤーはSMPが提供する公開ページ、お客様自身が管理するSMP外部サイトのどちらにも表示することができます。補足1ページ内に複数の動画プレーヤーを表示することも可能です。SMP内の公開ページに設置するSMPのデザインテンプレートを編集して、動画プレーヤーを設置することができます。デザインテンプレートの変更方法の詳細は「テンプレート変更を利用する」ページをご参照ください。タグを使用して設置する動画「詳細」の「タグ」で動画プレーヤータグの情報を確認します。設置したいページのhtmlに出力されたタグを貼り付けて保存します。設置例Webページ//xxxは動画コード説明タグは動画プレーヤーを配置するページ上の位置を識別します。に設定するidをshanon-video-player-(動画コード)にすると、idを識別して動画プレーヤーを適切な位置に配置します。スクリプトが読み込まれると各配信プラットフォームごとのAPIを利用して、動画プレーヤーを配置します。動画プレーヤーのサイズを変更する動画登録時に動画プレーヤーの幅・高さを設定することができます。動画登録画面動画登録時に動画プレーヤーの幅・高さを未設定にした場合、動画プレーヤータグ内のplayerを呼び出すスクリプトのオプションで幅・高さを指定できます。例_cam('player:common','youtube','xxx',{height:'360',width:'640'});$FORMを使用して設置するSMP内の公開ページのうち、特定ページ(キャンペーン詳細、サブキャンペーン詳細など)では、$FORM変数を入力するだけで動画プレーヤーを設置することができます。補足$FORMを使用して設置する場合、「キャンペーン・サブキャンペーンに動画を割り当てる」必要があります。キャンペーンテンプレートを使用してキャンペーン詳細のテンプレートに設定する例個別キャンペーンのキャンペーンテンプレート変更画面([キャンペーン][キャンペーンテンプレート変更])に遷移しますキャンペーンに適用されているテンプレート(seminar.zip)をダウンロードしますテンプレートを解凍し、キャンペーン詳細のHTML(preview.html)を開きます動画プレーヤーを配置したい場所に$FORM{videos}を入力して保存します:$FORM{check_cookie}$FORM{Common.body_header}$FORM{title}$FORM{sub_title}$FORM{header_image_with_tag}$FORM{summary}$FORM{detail_image_with_tag}開催概要$FORM{videos}//追加::同じフォルダにある動画テンプレート(video.html)を開きます必要があればテンプレートを変更して保存します$FORM{video_player}#shanon-video-player-$FORM{video_code}{height:360px;width:640px;}編集したフォルダを圧縮しアップーロードします動画視聴履歴で利用できる$FORMは、次のとおりです。機能パステンプレートパステンプレート名変数名表示される内容キャンペーン詳細/public/seminar/view/xxxsystem/seminar_base/seminarpreview.html$FORM{videos}キャンペーンに割り当てられている動画の項目(video.htmlに設定された項目)video.html$FORM{video_player}動画プレーヤー$FORM{video_name}動画タイトル$FORM{video_code}動画コード$FORM{video_youtube_chat}YouTubeChatサブキャンペーン詳細/public/session/view/xxxsystem/seminar_base/sessionpreview.html$FORM{videos}サブキャンペーンに割り当てられている動画の項目(video.htmlに設定された項目)video.html$FORM{video_player}動画プレーヤー$FORM{video_name}動画タイトル$FORM{video_code}動画コード$FORM{video_youtube_chat}YouTubeChat受講票/public/mypage/ticket/plain/public/tsystem/mypage/ticketplain.html$FORM{videos}申し込みしたキャンペーン(サブキャンペーン)に割り当てられている動画の項目(video.htmlに設定された項目)record.html$FORM{videos}申し込みしたキャンペーンに割り当てられている動画の項目(video.htmlに設定された項目)video.html$FORM{video_player}動画プレーヤー$FORM{video_name}動画タイトル$FORM{video_code}動画コード$FORM{video_youtube_chat}YouTubeChatタイムテーブル/public/application/addsystem/seminar_base/application/application_flow_master_id/timetableall_sessions_record.html$FORM{videos}サブキャンペーンに割り当てられている動画の項目(video.htmlに設定された項目)index.html$FORM{Session:(code):videos}コードで指定されたサブキャンペーンに割り当てられている動画の項目(video.htmlに設定された項目)video.html$FORM{video_player}動画プレーヤー$FORM{video_name}動画タイトル$FORM{video_code}動画コード$FORM{video_youtube_chat}YouTubeChat動画プレーヤーのサイズを変更する動画登録時に動画プレーヤーの幅・高さを設定することができます。動画登録画面動画登録時に動画プレーヤーの幅・高さを未設定にした場合、に設定されている動画プレーヤーを識別するidを指定することでスタイルが変更できます。idを指定するのに必要な動画コードは$FORM{video_code}で指定可能です。例$FORM{video_player}#shanon-video-player-$FORM{video_code}{height:360px;width:640px;}注意Vimeoの場合、$FORMで動画プレーヤーを設置時は必ず動画登録時に動画プレーヤーの幅・高さを設定してください。J-Streamの場合、$FORMで動画プレーヤーを設置時、動画登録時に動画プレーヤーの幅・高さ未設定にすると、動画情報登録時のJ-Streamスクリプトタグに設定されたサイズが適用されます。YouTubeChatのサイズを変更するに設定されている動画プレーヤーを識別するidを指定することでスタイルが変更できます。例$FORM{video_youtube_chat}#shanon-video-youtube-chat-$FORM{video_code}{height:360px;width:200px;}外部サイト上に設置する「タグを使用して設置する」を参考に外部サイトに動画プレーヤーを設置します。
https://smpdoc.shanon.co.jp/ja/web/video/chapter002/004/