@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/player-manager/previous-roll-ad.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playerList="playerListRef"
+      :adPlayerList="adPlayerListRef"
+      :adTest="true"
+      adChannel="ch"
+      :adDebug="true"
+      class="es-video-player-manager-page-css"
+      @onPlayerPlayList="onPlayerPlayList"
+      @onPlayerError="onPlayerError"
+      @onPlayerPlayMedia="onPlayerPlayMedia"
+      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
+      @onPlayerInterceptError="onPlayerInterceptError"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="播放" @onButtonClicked="onPlayButtonClicked" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { useESPlayerLog } from "@extscreen/es3-player";
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { ESADPlayer, ESADType } from "@extscreen/es3-ad-player";
+import type {
+  ESMediaSource,
+  ESMediaSourceList,
+  ESPlayerError,
+  ESPlayerInterceptError,
+  ESPlayerInterceptResult,
+} from "@extscreen/es3-player";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+export default defineComponent({
+  name: "前贴广告",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESPlayerLog();
+    const playerManager = ref<ESIPlayerManager>();
+    const playerWidth = 1920;
+    const playerHeight = 1080;
+
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+
+    const adPlayerList = [markRaw(ESADPlayer)];
+    const adPlayerListRef = ref(adPlayerList);
+
+    let isPaused = false;
+
+    const onPlayButtonClicked = () => {
+      const mediaSource: ESMediaSource = {
+        uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4",
+      };
+      //视频广告
+      const adMediaSource: ESMediaSource = {
+        uri: {
+          id: "extscreen-cast",
+          mediaId: "1111",
+          count: 1,
+          type: ESADType.ES_AD_TYPE_LAUNCH,
+        },
+      };
+      //前贴
+      const previousRollADList: ESMediaSourceList = {
+        index: 0,
+        list: [adMediaSource],
+        support: true,
+      };
+      //视频
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [mediaSource],
+      };
+
+      const mediaItem: ESMediaItem = {
+        playerType: 1,
+        mediaSourceList,
+        previousRollADList,
+      };
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [mediaItem],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+
+    const onESCreate = () => {
+      log.e(TAG, "-------onESCreate------START---->>>>>");
+    };
+
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+
+    const onPlayerPlayList = (playList: ESMediaItemList) => {
+      log.e(TAG, "-------onPlayerPlayList---------->>>>>", playList);
+    };
+
+    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
+      log.e(TAG, "-------onPlayerPlayMedia---------->>>>>", mediaItem);
+    };
+
+    const onPlayerError = (error: ESPlayerError) => {
+      log.e(TAG, "-------onPlayerError---------->>>>>", error);
+    };
+
+    const onPlayerInterceptSuccess = (result: ESPlayerInterceptResult) => {
+      log.e(TAG, "-------onPlayerInterceptSuccess---------->>>>>", result);
+    };
+
+    const onPlayerInterceptError = (error: ESPlayerInterceptError) => {
+      log.e(TAG, "-------onPlayerInterceptError---------->>>>>", error);
+    };
+
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      adPlayerListRef,
+      playerWidth,
+      playerHeight,
+      playerManager,
+      onPlayerPlayList,
+      onPlayerPlayMedia,
+      onPlayerError,
+      onPlayerInterceptSuccess,
+      onPlayerInterceptError,
+      onPlayButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/player-manager/start-position.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playerList="playerListRef"
+      class="es-video-player-manager-page-css"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+import type {
+  ESMediaSource,
+  ESMediaSourceList,
+  ESPlayerPosition,
+} from "@extscreen/es3-player";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+export default defineComponent({
+  name: "播放起始位置",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESLog();
+    const playerManager = ref<ESIPlayerManager>();
+
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+
+    let isPaused = false;
+
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+      const mediaSource: ESMediaSource = {
+        uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4",
+      };
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [mediaSource],
+      };
+      const position: ESPlayerPosition = {
+        position: 30000,
+        support: true,
+      };
+      const mediaItem: ESMediaItem = {
+        mediaSourceList,
+        position,
+      };
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [mediaItem],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      playerManager,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/player-manager/text-left-player.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="es-text-left-player-root-css">
+    <span
+      v-show="visible"
+      v-if="playerInitialized"
+      ref="textPlayerRef"
+      class="es-text-player-css"
+      >{{ textRef }}</span
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, watch } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESPlayerLogLevel, useESPlayerLog } from "@extscreen/es3-player";
+import type {
+  ESIPlayer,
+  ESMediaSource,
+  ESMediaSourceList,
+  ESPlayerAspectRatio,
+  ESPlayerDecode,
+  ESPlayerDefinition,
+  ESPlayerDurationCallback,
+  ESPlayerProgressCallback,
+  ESPlayerRate,
+} from "@extscreen/es3-player";
+
+const TAG = "ESTextLeftPlayer";
+
+export default defineComponent({
+  name: "ESTextLeftPlayer",
+  props: {
+    playerType: {
+      type: Number,
+      default: 10,
+    },
+    playMediaSourceAuto: {
+      type: Boolean,
+      default: true,
+    },
+    playMediaSourceListMode: {
+      type: Number,
+      default: 0,
+    },
+    playerWidth: {
+      type: Number,
+      default: 1920,
+    },
+    playerHeight: {
+      type: Number,
+      default: 1080,
+    },
+    playerZIndex: {
+      type: Number,
+      default: 1,
+    },
+    backgroundColor: {
+      type: String,
+      default: "transparent",
+    },
+  },
+  type: 10, //自定义播放器的类型为10
+  setup(props, context) {
+    const textPlayerRef = ref<ESIPlayer>();
+    const textRef = ref<string>("");
+    const log = useESPlayerLog();
+    const playerInitialized = ref(false);
+    const visible = ref<boolean>(true);
+
+    watch(
+      () => [textPlayerRef.value] as const,
+      ([instance], [oldInstance]) => {
+        if (instance) {
+          onPlayerInitializeSuccess();
+        }
+      },
+      { flush: "post" },
+    );
+
+    let mediaSourceList: ESMediaSourceList;
+    let mediaSourceIndex = 0;
+    let mediaSource: ESMediaSource;
+
+    function onPlayerInitializeSuccess(): void {
+      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
+        log.d(TAG, "-----onPlayerInitializeSuccess----->>>");
+      }
+      context.emit("onPlayerInitialized", getType());
+    }
+
+    function getType(): number {
+      return 10;
+    }
+
+    function getComponentInfo(): void {
+      //do nothing
+    }
+
+    function initComponent(...params: Array<any>): void {
+      //do nothing
+    }
+
+    function setVisible(value: boolean): void {
+      visible.value = value;
+    }
+
+    function initialize(): void {
+      playerInitialized.value = true;
+    }
+
+    function isInitialized(): boolean {
+      return playerInitialized.value;
+    }
+
+    function playMediaSourceList(list: ESMediaSourceList): void {
+      mediaSourceList = list;
+      playMediaSourceByIndex(list.index);
+    }
+
+    function playMediaSourceByIndex(index: number): void {
+      mediaSourceIndex = index;
+      playMediaSource(mediaSourceList.list[mediaSourceIndex]);
+    }
+
+    function playMediaSourceById(id: string): void {
+      //do nothing
+    }
+
+    function playMediaSource(source: ESMediaSource): void {
+      mediaSource = source;
+      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
+        log.d(TAG, "-----playMediaSource----->>>", source);
+      }
+      play();
+    }
+
+    function playNextMediaSource(): void {
+      //do nothing
+    }
+
+    function playPreviousMediaSource(): void {
+      //do nothing
+    }
+
+    function play(...params: Array<any>): void {
+      textRef.value = mediaSource.uri;
+    }
+
+    function start(position: number): void {
+      //do nothing
+    }
+
+    function pause(): void {
+      //do nothing
+    }
+
+    function resume(): void {
+      //do nothing
+    }
+
+    function stop(): void {
+      //
+    }
+
+    function reset(): void {
+      //do nothing
+    }
+
+    function release(): void {
+      //do nothing
+    }
+
+    function seekTo(progress: number): void {
+      //do nothing
+    }
+
+    function getDuration(): void {
+      //do nothing
+    }
+
+    function getCurrentPosition(): void {
+      //do nothing
+    }
+
+    function setSize(width: number, height: number): void {
+      //
+    }
+
+    function setPlayRate(playRate: ESPlayerRate): void {
+      //do nothing
+    }
+
+    function setDefinition(definition: ESPlayerDefinition): void {
+      //do nothing
+    }
+
+    function setDecode(decode: ESPlayerDecode): void {
+      //do nothing
+    }
+
+    function setAspectRatio(aspectRatio: ESPlayerAspectRatio): void {
+      //do nothing
+    }
+
+    function getLeftVolume(): void {
+      //do nothing
+    }
+
+    function getRightVolume(): void {
+      //do nothing
+    }
+
+    function setLeftVolume(leftVolume: number): void {
+      //do nothing
+    }
+
+    function setRightVolume(rightVolume: number): void {
+      //do nothing
+    }
+
+    function setStopped(stopped: boolean): void {
+      //do nothing
+    }
+
+    function setEnabled(enabled: boolean): void {
+      //do nothing
+    }
+
+    function setProgressCallback(callback: ESPlayerProgressCallback): void {
+      //do nothing
+    }
+
+    function setDurationCallback(callback: ESPlayerDurationCallback): void {
+      //do nothing
+    }
+
+    function invalidate(): void {
+      //do nothing
+    }
+
+    return {
+      textRef,
+      textPlayerRef,
+      playerInitialized,
+      visible,
+      getType,
+      getComponentInfo,
+      initComponent,
+      setVisible,
+      initialize,
+      isInitialized,
+      playMediaSourceList,
+      playMediaSourceByIndex,
+      playMediaSourceById,
+      playMediaSource,
+      playNextMediaSource,
+      playPreviousMediaSource,
+      play,
+      start,
+      pause,
+      resume,
+      stop,
+      reset,
+      release,
+      seekTo,
+      getDuration,
+      getCurrentPosition,
+      setSize,
+      setPlayRate,
+      setDefinition,
+      setDecode,
+      setAspectRatio,
+      getLeftVolume,
+      getRightVolume,
+      setLeftVolume,
+      setRightVolume,
+      setStopped,
+      setEnabled,
+      setProgressCallback,
+      setDurationCallback,
+      invalidate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.es-text-left-player-root-css {
+  width: 960px;
+  height: 1080px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: red;
+  position: absolute;
+  left: 0;
+}
+
+.es-text-player-css {
+  width: 960px;
+  height: 1080px;
+  font-size: 200px;
+}
+</style>