tencent cloud

Video on Demand

動向とお知らせ
製品アップデート情報
製品紹介
製品概要
Product Features
製品の機能
製品の強み
ユースケース
ソリューション
購入ガイド
課金概要
課金方式
購入ガイドライン
請求書の照会
支払い更新の説明
支払い延滞の説明
返金説明
クイックスタート
コンソールガイド
コンソールの説明
サービスの概要
アプリケーション管理
メディア管理
リソースパック管理
License Management
プラクティスチュートリアル
メディアのアップロード
オンデマンドメディアファイルのインテリジェントコールド化方法
ビデオ処理
配信と再生
イベント通知の受信方法
オリジンサーバーのマイグレーションツール
Live Recording
カスタムオリジンサーバーback-to-originの方法
ライブストリーミングハイライトクリップを VOD に永続化するためのガイド
EdgeOne を使用して VOD コンテンツを配信する方法
開発ガイド
メディアアップロード
メディア加工処理
ビデオAI
イベント通知
ビデオ再生
メディアファイルのダウンロード
サブアプリケーションシステム
エラーコード
Player+ドキュメント
Overview
Basic Concepts
Features
Free Demo
Free Trial License
Purchase Guide
SDK Download
Licenses
Player Guide
Integration (UI Included)
Integration (No UI)
Advanced Features
API Documentation
Player Adapter
Player SDK Policy
よくあるご質問
モバイル端末再生に関するご質問
料金
ビデオのアップロード
ビデオの公開
ビデオの再生
Web側の再生
全画面表示再生
データ統計
CAM関連
メディア資産冷却に関する質問
Agreements
Service Level Agreement
VOD ポリシー
プライバシーポリシー
データ処理とセキュリティ契約
お問い合わせ
用語集

全画面表示再生

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-12-02 17:39:37

全画面とWebページの全画面の違いは何ですか。

端末の全画面表示:表示パネル範囲内の全画面表示を指します。全画面表示では、ビデオ画像のみが端末画面に表示され、アドレスバーなどのUIコンポーネントは表示されません。端末の全画面表示では、ブラウザがAPIに対応する必要があります。端末の全画面表示をサポートするAPIは、Fullscreen APIとwebkitEnterFullScreenの2つがあります。Fullscreen APIを使用して全画面表示した場合、HTMLとCSSで構成されるプレーヤーパネルが表示されるのは特徴です。webkitEnterFullScreenはvideoタグにのみ使用でき、通常、モバイル端末がFullscreen APIをサポートしない場合に使用されます。このAPIを介して全画面表示に入った後、プレーヤーパネルはシステムに搭載されているUIになります。
Webページの全画面表示:Webページの表示領域内の全画面表示を指します。Webページが全画面表示されても、アドレスバーなどのUIコンポーネントが表示されます。通常、この表示モードは、ブラウザが端末の全画面表示をサポートしていない場合に全画面表示を実装する方法です。そのため、疑似全画面表示とも呼ばれます。Webページの全画面表示はCSSによって実装されます。
VODのWebプレーヤーは、端末の全画面表示がメインであり、Webページの全画面表示が補足という全画面表示方式を採用しています。全画面表示の優先順位は、Fullscreen API > webkitEnterFullScreen > Webページの全画面表示の順となります。
Flashの使用はブラウザで徐々に制限されるようになっているため、VOD Webプレーヤーは、Flashの使用を減らしてHTML5標準で開発されています。一部の古いブラウザでは、全画面表示機能の使用が制限されています。旧バージョンのVODプレーヤー1.0は、Flashを使用して開発され、Flashプラグインを使用して端末の全画面表示を実現しました。Fullscreen APIをサポートしていないブラウザで全画面表示するには、旧バージョンのVODプレーヤー1.0のみを使用できます。
現在の全画面表示の対応状況は次のとおりです。
X5カーネル(Android端末のWeChat、モバイルQQ、QQブラウザを含む):Fullscreen APIをサポートしなく、webkitEnterFullScreenをサポートしています。全画面表示にすると、X5カーネルの端末の全画面表示モードに入ります。
Android端末のChrome:Fullscreen APIがサポートされています。全画面表示モードでは、Tencent Cloud プレーヤーUIを備えた端末の全画面表示モードに入ります。
iOS端末(WeChat、Mobile QQ、Safariを含む):FullscreenAPIをサポートしなくwebkitEnterFullScreenをサポートしています。全画面表示モードでは、iOSシステムUIの端末の全画面表示モードに入ります。
IE 8/9/10:Fullscreen APIもwebkitEnterFullScreenもサポートしません。全画面表示は、Webページの全画面表示となります。
デスクトップWeChatブラウザ:FullscreenAPIもwebkitEnterFullScreenもサポートしません。全画面表示モードは、Webページの全画面表示となります(macOSのWeChatブラウザは現在、全画面表示モードをサポートしません)。
その他のデスクトップブラウザ:Fullscreen APIは一般的にサポートします。全画面表示モードでは、Tencent Cloud プレーヤーUIを備えた端末の全画面表示モードに入ります。


ビデオが再生されるときに強制的に全画面表示に入る問題を解決するにはどうすればよいですか。

ページ内(全画面表示ではない)の再生を実現するには、playsinlineとwebkit-playsinline属性をvideoタグに追加する必要があります。これにより、Tencent Cloudプレーヤーではデフォルトでplaysinlineとwebkit-playsinline属性を追加します。iOS 10以降はplaysinline属性を認識しますが、iOS 10以前のシステムはwebkit-playsinline属性を認識します。
テストの結果、iOSのSafariブラウザではページ埋め込み(インライン)再生を実現できます。Androidはwebkit-playsinlineを認識しますが、Androidのオープン性により、カスタムブラウザが多数あるため、これらの属性は有効にならない場合があります。たとえば、TBSカーネルを搭載したブラウザ(WeChat、モバイルQQ、QQブラウザを含むがこれらに限定されない)で、システムによりビデオ再生が強制的に全画面表示に入ることを防ぐために、同じレイヤーのプレーヤー属性(Integration Documentation使い方の説明)を使用する必要がある場合があります。
それでも問題が解決しない場合は、 Submit Ticket でお問い合わせください。

デフォルトで全画面再生に入る問題を解決するにはどうすればよいですか?

[ビデオが再生されるときに強制的に全画面表示に入る](#p1)の解決策をご参照ください。

iOS Hybrid AppのWebViewでデフォルトで全画面再生に入る問題を解決するにはどうすればよいですか。

WebViewパラメータallowsInlineMediaPlayback = YESに設定して、インラインビデオ再生を許可します。つまり、WebView/UiWebView強制的に全画面ビデオ再生を禁止します。

iframeでプレーヤーが全画面再生に入らない問題を解決するにはどうすればよいですか。

iframeタグでallowfullscreen属性を設定します。サンプルコードは以下のとおりです。
<iframe allowfullscreen src="" frameborder="0" scrolling="no" width="100%" height="270"></iframe>

IE 8/9/10で全画面表示できない問題を解決するにはどうすればよいですか。

Full Screen API をサポートしていない古いブラウザでは、VODプレーヤーはCSSを使用してWebページの全画面表示を実装します。ブラウザの全画面表示(通常はF11を押す)を使用すると、端末の全画面表示を実現できます。プレーヤーのページ内の全画面スタイルがページ内のCSSによって制限されていないことを確認する必要があります。たとえば、プレーヤーの親コンテナoverflow:hiddenを設定してはなりません。
iframeが使用されている場合、プレーヤーはiframeの外部のCSSスタイルを変更できず、外部ページはスクリプトとスタイルのサポートを提供する必要があります。通常、外部ページでは、Webページの全画面表示を実装するにはクロスドメインのサポートが必要です。そのため、iframeでプレーヤーを使用することはお勧めしません。
説明:
IE8/9/10はFull Screen APIをサポートしていないため、Full Screen APIを使用して端末の全画面表示を実装することはできません。

ヘルプとサポート

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

フィードバック