@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/VideoDemo/components/Controllor.vue

@@ -1,197 +0,0 @@
-<script setup>
-import { inject } from "vue";
-import { useRouter } from "vue-router";
-import Button from "./Button.vue";
-
-const props = defineProps({
-  style: {
-    type: Object,
-    default() {
-      return { width: 1400, height: 50 };
-    },
-  },
-});
-const router = useRouter();
-
-const useTexture = inject("useTexture");
-const objectFit = inject("objectFit");
-const videoRect = inject("videoRect");
-const playVideo = inject("playVideo");
-const seekVideo = inject("seekVideo");
-const enableAnimation = inject("enableAnimation");
-const videoTime = inject("videoTime");
-const objectFitTitle = inject("objectFitTitle");
-let objectFitIndex = 0;
-let focusedItemIndex = 0;
-
-const setObjectFit = (index) => {
-  if (typeof index === "number") {
-    objectFitIndex = index;
-  } else {
-    objectFitIndex = ++objectFitIndex % objectFitData.length;
-  }
-  const data = objectFitData[objectFitIndex];
-  objectFit.value = data.objectFit;
-  objectFitTitle.value = data.name;
-  videoRect.value = {
-    left: (1280 - data.width) / 2,
-    top: 50,
-    width: data.width,
-    height: 500,
-  };
-};
-
-const buttonList = [
-  {
-    name: "ToVideoMode",
-    onClick: () => {
-      playVideo.value = null; // 停止并初始化播放
-      enableAnimation.value = false;
-      videoTime.currentTime = 0;
-      videoTime.duration = 0;
-      useTexture.value = !useTexture.value;
-    },
-    isModeButton: true,
-  },
-  {
-    name: "Play",
-    onClick: () => {
-      playVideo.value = !playVideo.value;
-    },
-    isPlayButton: true,
-  },
-  {
-    name: "Forward",
-    onClick: () => {
-      seekVideo.value = seekVideo.value !== 5 ? 5 : 5.1 /* 为了触发ref更新 */;
-    },
-  },
-  {
-    name: "Rewind",
-    onClick: () => {
-      seekVideo.value =
-        seekVideo.value !== -5 ? -5 : -5.1 /* 为了触发ref更新 */;
-    },
-  },
-  {
-    name: "ObjectFit",
-    onClick: setObjectFit,
-  },
-  {
-    name: "StartAnimation",
-    onClick: () => {
-      enableAnimation.value = !enableAnimation.value;
-    },
-    isAnimationButton: true,
-  },
-];
-const objectFitData = [
-  { name: "contain-horizontal", objectFit: "contain", width: 1200 },
-  { name: "contain-vertical", objectFit: "contain", width: 400 },
-  { name: "fill", objectFit: "fill", width: 1200 },
-  { name: "none-horizontal", objectFit: "none", width: 1200 },
-  { name: "none-vertical", objectFit: "none", width: 400 },
-  { name: "cover-horizontal", objectFit: "cover", width: 1200 },
-  { name: "cover-vertical", objectFit: "cover", width: 400 },
-];
-
-const getButtonData = () => {
-  let length = buttonList.length;
-  if (!useTexture.value) {
-    // 只有texture方式可以做animation
-    length -= 1;
-  }
-
-  let data = [];
-  for (let idx = 0; idx < length; idx++) {
-    const button = buttonList[idx];
-    data.push({
-      ...button,
-      size: {
-        width: 180,
-        height: 40,
-      },
-    });
-  }
-  return data;
-};
-const getButtonDataLength = () => {
-  let length = buttonList.length;
-  if (!useTexture.value) {
-    // 只有texture方式可以做animation
-    length -= 1;
-  }
-
-  return length;
-};
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，回退
-    return true;
-  }
-
-  let changeFocusTo = -1;
-  const buttonCount = getButtonDataLength();
-  switch (ev.keyCode) {
-    case 37: // Left
-      changeFocusTo = (focusedItemIndex - 1 + buttonCount) % buttonCount;
-      break;
-    case 39: // Right
-      changeFocusTo = (focusedItemIndex + 1) % buttonCount;
-      break;
-    default:
-      break;
-  }
-  if (changeFocusTo >= 0) {
-    ev.ownerNode
-      .findBlockByName("video-" + (changeFocusTo + 10).toString())
-      .requestFocus();
-    focusedItemIndex = changeFocusTo;
-    return true;
-  }
-
-  return false;
-};
-
-const getShowName = (item) => {
-  if (item.isModeButton) {
-    return useTexture.value ? "ToVideoMode" : "ToOffscreenMode";
-  } else if (item.isPlayButton) {
-    return playVideo.value ? "Pause" : "Play";
-  } else if (item.isAnimationButton) {
-    return enableAnimation.value ? "StopAnimation" : "StartAnimation";
-  }
-  return item.name;
-};
-
-useTexture.value = false;
-setObjectFit(0);
-playVideo.value = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整;
-enableAnimation.value = false;
-</script>
-
-<template>
-  <div :style="style" :key="useTexture" :set="(leftOffset = 0)">
-    <jsv-focus-block :onKeyDown="onKeyDown">
-      <Button
-        v-for="(item, index) in getButtonData()"
-        :key="index"
-        :set="(leftOffset += item.size.width + 10)"
-        :style="{
-          left: leftOffset - item.size.width,
-          width: item.size.width,
-          height: item.size.height,
-        }"
-        :autoFocus="index === 0"
-        :name="'video-' + (index + 10).toString()"
-        :onClick="item.onClick"
-      >
-        {{ getShowName(item) }}
-      </Button>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-</style>

package/VideoDemo/components/VideoFrame.vue

@@ -1,140 +0,0 @@
-<script setup>
-import { inject, watch, onMounted } from "vue";
-import { JsvVideo } from "jsview";
-
-const useTexture = inject("useTexture");
-const objectFit = inject("objectFit");
-const videoRect = inject("videoRect");
-const playVideo = inject("playVideo");
-const seekVideo = inject("seekVideo");
-const enableAnimation = inject("enableAnimation");
-const videoTime = inject("videoTime");
-const playStatus = inject("playStatus");
-const videoUrl =
-  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
-const canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
-const rect = {
-  top: 50,
-  left: 40,
-  width: 1200,
-  height: 500,
-};
-let video = null;
-
-const onVideoRef = (ele) => {
-  video = ele;
-};
-
-const setPlayState = (play) => {
-  if (play) {
-    video?.play();
-  } else {
-    video?.pause();
-  }
-};
-
-const seekVideoStep = (time) => {
-  if (video) {
-    let playEnd = false;
-    let seekTime = video.currentTime + Math.ceil(time);
-    if (seekTime < 0) {
-      seekTime = 0;
-    } else if (seekTime > videoTime.duration) {
-      seekTime = videoTime.duration;
-      if (video.currentTime != videoTime.duration) {
-        // 触发一次播放，收到ended事件
-        playEnd = true;
-      }
-    }
-    video.currentTime = seekTime;
-    if (playEnd) {
-      this.setPlayState(true);
-    }
-  }
-};
-
-const onPlayStateChange = (event) => {
-  console.log("VideoFrame.onPlayStateChangeEvent()", event);
-  playVideo.value = event.type === "play" ? true : false;
-  if (!(playStatus.value == "ended" && event.type == "pause")) {
-    // 忽略播放结束后的pause事件
-    playStatus.value = event.type;
-  }
-};
-
-const onTimeUpdate = (event) => {
-  console.log("VideoFrame.onTimeUpdateEvent()", event);
-  videoTime.currentTime = video.currentTime;
-};
-
-const onDurationChange = (event) => {
-  console.log("VideoFrame.onDurationChangeEvent()", event);
-  videoTime.duration = video.duration;
-};
-
-const onEvent = (event) => {
-  console.log("VideoFrame.onEvent()", event);
-};
-
-watch(playVideo, setPlayState);
-watch(seekVideo, seekVideoStep);
-
-onMounted(() => {
-  if (canAutoPlay) {
-    playVideo.value = true;
-  }
-});
-</script>
-
-<template>
-  <div>
-    <div
-      :style="{
-        ...videoRect,
-        backgroundColor: 'rgb(200,100,100)',
-      }"
-    ></div>
-    <JsvVideo
-      :onRef="onVideoRef"
-      :useTexture="useTexture"
-      :src="videoUrl"
-      :autoplay="canAutoPlay ? 'autoplay' : undefined"
-      :style="{
-        ...videoRect,
-        objectFit: objectFit,
-        animation:
-          useTexture && enableAnimation ? 'offscreenAnim 3s infinite' : null,
-        borderRadius: '80 80 160 240',
-      }"
-      :onCanPlay="onEvent"
-      :onCanPlayThrough="onEvent"
-      :onDurationChange="onDurationChange"
-      :onEnded="onPlayStateChange"
-      :onError="onPlayStateChange"
-      :onLoad="onEvent"
-      :onLoadedMetadata="onEvent"
-      :onLoadStart="onEvent"
-      :onPause="onPlayStateChange"
-      :onPlay="onPlayStateChange"
-      :onPlaying="onEvent"
-      :onProgress="onEvent"
-      :onSeeking="onEvent"
-      :onSeeked="onTimeUpdate"
-      :onStalled="onEvent"
-      :onTimeUpdate="onTimeUpdate"
-    />
-  </div>
-</template>
-
-<style scoped>
-@keyframes offscreenAnim {
-  from {
-    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
-    transform-origin: center center;
-  }
-}
-</style>