tencent cloud

Cloud Object Storage

最新情報とお知らせ
製品アップデート情報
製品のお知らせ
製品概要
製品概要
機能概要
応用シナリオ
製品の優位性
基本概念
リージョンとアクセスドメイン名
仕様と制限
製品の課金
課金概要
課金方式
課金項目
無料利用枠
記帳例
請求書の確認とダウンロード
お支払い遅れについて
よくある質問
クイックスタート
コンソールクイックスタート
COSBrowserクイックスタート
ユーザーガイド
リクエストの作成
バケット
オブジェクト
データ管理
バッチ処理
グローバルアクセラレーション
監視とアラーム
運用管理センター
データ処理
インテリジェントツールボックス使用ガイド
データワークフロー
アプリ統合
ツールガイド
ツール概要
環境のインストールと設定
COSBrowserツール
COSCLIツール
COSCMDツール
COS Migrationツール
FTP Serverツール
Hadoopツール
COSDistCpツール
HDFS TO COSツール
オンラインツール (Onrain Tsūru)
セルフ診断ツール
実践チュートリアル
概要
アクセス制御と権限管理
パフォーマンスの最適化
AWS S3 SDKを使用したCOSアクセス
データディザスタリカバリバックアップ
ドメイン名管理の実践
画像処理の実践
COSオーディオビデオプレーヤーの実践
データセキュリティ
データ検証
COSコスト最適化ソリューション
サードパーティアプリケーションでのCOSの使用
移行ガイド
サードパーティクラウドストレージのデータをCOSへ移行
データレークストレージ
クラウドネイティブデータレイク
メタデータアクセラレーション
データアクセラレーター GooseFS
データ処理
データ処理概要
画像処理
メディア処理
コンテンツ審査
ファイル処理
ドキュメントプレビュー
トラブルシューティング
RequestId取得の操作ガイド
パブリックネットワーク経由でのCOSへのファイルアップロード速度の遅さ
COSへのアクセス時に403エラーコードが返される
リソースアクセス異常
POST Objectの一般的な異常
セキュリティとコンプライアンス
データ災害復帰
データセキュリティ
クラウドアクセスマネジメント
よくある質問
よくあるご質問
一般的な問題
従量課金に関するご質問
ドメインコンプライアンスに関するご質問
バケット設定に関する質問
ドメイン名とCDNに関するご質問
ファイル操作に関するご質問
権限管理に関するご質問
データ処理に関するご質問
データセキュリティに関するご質問
署名付きURLに関するご質問
SDKクラスに関するご質問
ツール類に関するご質問
APIクラスに関するご質問
Agreements
Service Level Agreement
プライバシーポリシー
データ処理とセキュリティ契約
連絡先
用語集
ドキュメントCloud Object Storage実践チュートリアルCOSオーディオビデオプレーヤーの実践VideojsPlayerを使用したCOSビデオファイルの再生

VideojsPlayerを使用したCOSビデオファイルの再生

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-06-26 10:42:27

概要

ここでは、VideojsPlayerを使用し、Tencent Cloud Infinite(CI)の提供する豊富なオーディオビデオ機能と組み合わせて、WebブラウザでCOSビデオファイルを再生する方法についてご説明します。

統合ガイド

ステップ1：ページにプレーヤースタイルファイルとスクリプトファイルを導入する

<!--プレーヤースタイルファイル-->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<!--プレーヤースクリプトファイル-->
<script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
説明：
プレーヤーを正式に使用する際は、ご自身で上記の静的リソースをデプロイすることをお勧めします。

ステップ2：プレーヤーコンテナノードを設定する

プレーヤーを表示したいページ位置にプレーヤーコンテナを追加します。例えば、index.htmlに次のコードを追加します（コンテナIDおよび幅と高さはいずれもカスタマイズできます）。
<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="100%"
  height="100%"
  data-setup="{}"
></video>

ステップ3：ビデオファイルオブジェクトアドレスを取得する

1. バケットの作成を行います。
2. ビデオファイルのアップロードを行います。
3. ビデオファイルのオブジェクトアドレスを取得します。形式はhttps://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<ビデオ形式>です。
説明：
クロスドメインの問題がある場合は、バケットのクロスドメインアクセスCORS設定を行う必要があります。詳細については、クロスドメインアクセスの設定をご参照ください。
バケットがプライベート読み取り/書き込みの場合、オブジェクトアドレスには署名が必要です。詳細については、リクエスト署名をご参照ください。

ステップ4：プレーヤーコンテナ内にビデオアドレスを設定し、COSビデオファイルのオブジェクトアドレスURLを渡す

<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="100%"
  height="100%"
  data-setup="{}"
>
  <source
    src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
    type="video/mp4"
  />
</video>

機能ガイド

さまざまな形式のビデオファイルを再生する

1. COSバケット上のビデオファイルのオブジェクトアドレスを取得します。
説明：
トランスコードされていないソースビデオは再生の際に互換性の問題が生じる可能性があるため、トランスコード後のビデオで再生を行うことをお勧めします。Cloud Infiniteのオーディオビデオトランスコーディング処理により、さまざまな形式のビデオファイルを取得することができます。
2. さまざまなビデオ形式に対し、マルチブラウザでの互換性を保証するためには、対応する依存関係の導入が必要です。
MP4：他の依存関係を導入する必要はありません。
HLS：ChromeやFirefoxなどの最新ブラウザでH5を介してHLS形式のビデオを再生したい場合は、 tcplayer.min.js の前にhls.min.jsを導入する必要があります。
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
FLV：ChromeやFirefoxなどの最新ブラウザでH5を介してFLV形式のビデオを再生したい場合は、 tcplayer.min.js の前にflv.min.jsを導入する必要があります。
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
DASH：DASHビデオにはdash.all.min.jsファイルのロードが必要です。
  <script src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js"></script>
3. プレーヤーを初期化し、オブジェクトアドレスを渡します。
<!-- MP4 -->
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
  type="video/mp4"
/>

<!-- HLS -->
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
  type="application/x-mpegURL"
/>

<!-- FLV -->
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.flv"
  type="video/x-flv"
/>

<!-- DASH -->
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mpd"
  type="application/dash+xml"
/>
サンプルコードを取得します。
MP4再生サンプルコード
FLV再生サンプルコード
HLS再生サンプルコード
DASH再生サンプルコード


PM3U8ビデオを再生する

PM3U8はプライベートM3U8ビデオファイルのことです。COSはプライベートM3U8 TSリソースの取得に用いるダウンロード権限承認APIを提供しています。プライベートM3U8インターフェースをご参照ください。
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600"
  type="application/x-mpegURL"
/>
サンプルコードを取得します。
PM3U8再生サンプルコード


カバー画像を設定する

1. COSバケット上のカバー画像のオブジェクトアドレスを取得します。
注意：
Cloud Infiniteインテリジェントカバー機能により、最適なフレームを抽出してスクリーンキャプチャを生成し、それをカバーにすることでコンテンツの魅力をアップさせます。
2. プレーヤーを初期化し、カバー画像を設定します。
<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="100%"
  height="100%"
  data-setup="{}"
  poster="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/poster.png"
>
  <source
    src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
    type="video/mp4"
  />
</video>
サンプルコードを取得します。
カバー画像設定サンプルコード


HLS暗号化ビデオを再生する

ビデオコンテンツの安全性を保障し、ビデオの違法なダウンロードと拡散を防止するため、Cloud InfiniteはHLSビデオコンテンツに対する暗号化機能を提供します。この機能はプライベート読み取りファイルよりさらに高いセキュリティレベルを有します。暗号化されたビデオは、アクセス権限のないユーザーの視聴用に配信できなくなります。ビデオがローカルにダウンロードされた場合でも、ビデオ自体が暗号化されているため、悪意ある二次配信が不可能であり、ビデオの著作権が違法に侵害されないよう保障することができます。 操作手順は次のとおりです。
1. HLS暗号化ビデオの再生およびCOSオーディオビデオ実践 | ビデオをロックするのフローを参照し、暗号化ビデオを生成します。
2. プレーヤーを初期化し、ビデオオブジェクトアドレスを渡します。
<source
  src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
  type="application/x-mpegURL"
/>
サンプルコードを取得します。
HLS暗号化ビデオ再生サンプルコード
前の記事へ: DPlayerを使用したCOSビデオファイルの再生次の記事へ: ホットリンク保護実践

ヘルプとサポート

この記事はお役に立ちましたか？

フィードバック