Tencent Cloud Playerをuniappに導入する方法-uni-app-php.cn

Tencent Cloud Playerをuniappに導入する方法

PHPz

リリース： 2023-04-18 16:01:17

オリジナル

1934 人が閲覧しました

テクノロジーの継続的な発展に伴い、ビデオメディアに対する人々の需要と依存も高まっています。モバイル側では、多くのアプリケーションがビデオ再生機能を必要としますが、ビデオ再生を実装する際には多くの問題に直面します。これらの問題を解決するために、インターネット企業は独自のビデオプレーヤーを立ち上げており、Tencent Cloud も例外ではありません。

Tencent Cloud Player は、スムーズで安定した使いやすいプレーヤーで、複数の形式でのビデオ再生をサポートするだけでなく、開発者の個別のニーズを満たす高度なカスタマイズもサポートします。この記事では主に、Tencent Cloud Player を uniapp フレームワークに導入する方法について説明します。

1. Tencent Cloud アカウントの登録

Tencent Cloud プレーヤーを導入する前に、Tencent Cloud アカウントを登録し、公式 Web サイトを開いて、プロンプトに従って登録する必要があります。登録が成功したら、コンソールに入り、左側の「製品とサービス」で「ビデオサービス」を見つけて、ビデオサービスアカウントを作成します。

2. プレーヤーを作成します

コンソールにログインし、左側の [ビデオサービス] で [Cloud On Demand] を見つけ、クリックして入力し、[プレーヤー管理] を見つけ、[] をクリックします。新しい「新しいプレーヤーを作成します。プレーヤー名を設定し、デフォルトの画像、ラベルを選択し、カバーやその他の情報を入力します。

3. プレーヤーコードの取得

プレーヤー作成後、プレーヤー名をクリックして「管理ページ」に入り、メニューバーの「埋め込みコードの生成」を見つけて動画を選択し、必要に応じて支払い等基本情報生成されたコードを変更して、モバイルインターフェイスに適応させます。

4. Tencent Cloud Player を uniapp に導入する

uniapp 開発では、Tencent Cloud Player の js コードとスタイルファイルをページに導入する必要があります。コードは次のとおりです:

<script src=&#39;https://qcloud.qq.com/xxx/js/tcplayer-2.4.0.min.js&#39;></script>
<link rel=&#39;stylesheet&#39; href=&#39;https://qcloud.qq.com/xxx/css/tcplayer.css&#39;>

ログイン後にコピー

このうち、srcとhrefのリンクは特定のコード生成に合わせて変更する必要があります。コードは uniapp の App.vue ファイルに配置され、アプリケーションの起動時にロードされることが保証されます。

5. Tencent Cloud Player の使用

Uniapp で Tencent Cloud Player を使用する方法は、基本的に通常の HTML ページにプレーヤーを導入する方法と同じです。プレーヤーを使用する必要があるページで、js コードを通じてビデオタグを作成し、ビデオアドレス、プレーヤーのサイズ、カスタマイズされた UI、および Tencent Cloud Player に必要なその他のパラメーターを Tencent Cloud Player に渡します。コードは次のとおりです。

<template>
   <view>
       <video id=&#39;videoplayer&#39;/>
   </view>
</template>

<script>
    export default {
        onReady() {
            var player = new TcPlayer('videoplayer', {
                "m3u8": 'http://xxx.m3u8', //视频地址
                "width": 640, //视频宽度
                "height": 360 //视频高度
            });
        }
    }
</script>

ログイン後にコピー

Tencent Cloud Player を使用する場合、ページの読み込み後に初期化が確実に行われるように、その初期化を onReady() 関数に配置する必要があることに注意してください。テンプレートにビデオタグが記述されている場合、初期化時にタグの ID で参照する必要があります。ここでのビデオプレーヤーはカスタマイズ可能です。

概要:

上記は、Tencent Cloud Player を uniapp に導入する主な手順です。上記の簡単な手順により、モバイルアプリケーションでのビデオ再生効果をより高いレベルに向上させることができます。ユーザーエクスペリエンスを向上させるために、プレーヤー用にいくつかのカスタマイズ設定を行うことができることに注意してください。さらに、Tencent Cloud には、理解して使用する価値のある製品やサービスが他にもたくさんあります。

以上がTencent Cloud Playerをuniappに導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。