video.uvue

<template>
  <view class="uni-flex-item">
    <video class="video" ref="video" id="video" :header="header" :src=src :autoplay="autoplay" :loop="loop"
      :muted="muted" :initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
      :enable-danmu="enableDanmu" :page-gesture="pageGesture" :direction="direction" :show-progress="showProgress"
      :show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn" :show-center-play-btn="showCenterPlayBtn"
      :show-loading="showLoading" :enable-progress-gesture="enableProgressGesture" :object-fit="objectFit"
      :poster="poster" :show-mute-btn="showMuteBtn" :title="title" :enable-play-gesture="enablePlayGesture"
      :vslide-gesture="vslideGesture" :vslide-gesture-in-fullscreen="vslideGestureInFullscreen" :codec="codec"
      :http-cache="httpCache" :play-strategy="playStrategy" :danmu-list="danmuList" @play="onPlay" @pause="onPause"
      @ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError" @progress="onProgress"
      @fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
    </video>
    <scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
      <view class="uni-btn-v">
        <navigator url="/pages/component/video/video-format">
          <button type="primary" @click="pause">视频格式示例</button>
        </navigator>
      </view>
      <view class="uni-title">
        <text class="uni-title-text">API示例</text>
      </View>
      <view class="uni-btn-v">
        <button type="primary" @click="play">播放</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="pause">暂停</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="seek(pos)">跳转到指定位置</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="requestFullScreen(requestFullScreenOptions)">进入全屏</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="exitFullScreen">退出全屏</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="stop">停止</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="playbackRate(rate)">设置倍速</button>
      </view>
      <view class="uni-title">
        <text class="uni-title-text">属性示例</text>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setSrc(_src)">设置播放资源</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setMuted()">设置是否静音播放</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
      </view>
      <!-- #ifndef WEB -->
      <view class="uni-btn-v">
        <button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
      </view>
      <!-- #endif -->
      <view class="uni-btn-v">
        <button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setPoster(_poster)">设置视频封面</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setTitle(_title)">设置视频标题（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setCodec(_codec)">设置解码器（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（仅 App 平台，未播放时设置有效）</button>
      </view>
      <view class="uni-btn-v">
        <button type="primary" @click="setHeader(_header)">设置header</button>
      </view>
    </scroll-view>
    <video v-if="autoTest" :src="localSrc" @error="onError"></video>
  </view>
</template>

<script>
  export default {
    onReady() {
      this.videoContext = uni.createVideoContext('video', this);
    },
    data() {
      return {
        videoContext: null as VideoContext | null,
        // 属性
        src: "https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4",
        _src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
        autoplay: false,
        loop: false,
        muted: false,
        initialTime: 0,
        _initialTime: 6,
        duration: -1,
        _duration: 60,
        controls: true,
        danmuList: [{
          text: '要显示的文本',
          color: '#FF0000',
          time: 3
        }, {
          text: '要显示的文本2',
          color: '#31ff23',
          time: 5
        }, {
          text: '要显示的文本3',
          color: '#f13ef8',
          time: 7
        }, {
          text: '要显示的文本4',
          color: '#4972f8',
          time: 9
        }, {
          text: '要显示的文本5',
          color: '#000000',
          time: 11
        }] as Array<Danmu>,
        danmuBtn: false,
        enableDanmu: true,
        pageGesture: false,
        direction: -90,
        _direction: 0,
        requestFullScreenOptions: {
          direction: -90
        } as RequestFullScreenOptions,
        showProgress: true,
        showFullscreenBtn: true,
        showPlayBtn: true,
        showCenterPlayBtn: true,
        showLoading: true,
        enableProgressGesture: true,
        objectFit: "contain",
        _objectFit: "fill",
        poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
        _poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
        showMuteBtn: false,
        title: "video-component",
        _title: "video-component video-component",
        enablePlayGesture: false,
        vslideGesture: false,
        vslideGestureInFullscreen: true,
        codec: "hardware",
        _codec: "software",
        httpCache: true,
        playStrategy: 0,
        _playStrategy: 2,
        header: {
          'User-Agent': 'User-Agent test',
          'header': 'header test',
          'cookie': 'cookie test'
        } as UTSJSONObject,
        _header: {
          'User-Agent': 'User-Agent test2',
          'header': 'header test2',
          'cookie': 'cookie test2'
        } as UTSJSONObject,
        // API
        pos: 10,
        rate: 1.5,
        danmu: {
          text: '要显示的文本',
          color: '#FF0000'
        } as Danmu,
        // 自动化测试
        autoTest: false,
        isPlaying: false,
        isPause: false,
        isError: false,
        localSrc: ''
      }
    },
    onLoad() {
      // #ifdef WEB
      this.muted = true // web端非静音视频不可自动播放
      // #endif
    },
    methods: {
      // API
      play: function () {
        console.log("play");
        this.videoContext?.play();
      },
      pause: function () {
        console.log("pause");
        (uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
        // this.videoContext?.pause();
      },
      seek: function (pos : number) {
        console.log("seek -> " + pos);
        this.videoContext?.seek(pos);
      },
      requestFullScreen: function (options : RequestFullScreenOptions | null) {
        console.log("requestFullScreen -> " + options);
        this.videoContext?.requestFullScreen(options);
      },
      exitFullScreen: function () {
        console.log("exitFullScreen");
        this.videoContext?.exitFullScreen();
      },
      stop: function () {
        console.log("stop");
        uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
        // this.videoContext?.stop();
      },
      sendDanmu: function (danmu : Danmu) {
        console.log("sendDanmu -> " + danmu);
        this.videoContext?.sendDanmu(danmu);
      },
      playbackRate: function (rate : number) {
        console.log("playbackRate -> " + rate);
        this.videoContext?.playbackRate(rate);
      },
      // 属性
      setSrc: function (src : string) {
        this.src = src;
        console.log("src -> " + this.src)
      },
      setAutoplay: function () {
        this.autoplay = !this.autoplay;
        console.log("autoplay -> " + this.autoplay)
      },
      setLoop: function () {
        this.loop = !this.loop;
        console.log("loop -> " + this.loop)
      },
      setMuted: function () {
        this.muted = !this.muted;
        console.log("muted -> " + this.muted)
      },
      setInitialTime: function (initialTime : number) {
        this.initialTime = initialTime;
        console.log("initialTime -> " + this.initialTime)
      },
      setDuration: function (duration : number) {
        this.duration = duration;
        console.log("duration -> " + this.duration)
      },
      setControls: function () {
        this.controls = !this.controls;
        console.log("controls -> " + this.controls)
      },
      setDanmuBtn: function () {
        this.danmuBtn = !this.danmuBtn;
        console.log("danmuBtn -> " + this.danmuBtn)
      },
      setPageGesture: function () {
        this.pageGesture = !this.pageGesture;
        console.log("pageGesture -> " + this.pageGesture)
      },
      setDirection: function (direction : number) {
        this.direction = direction;
        console.log("direction -> " + this.direction)
      },
      setShowProgress: function () {
        this.showProgress = !this.showProgress;
        console.log("showProgress -> " + this.showProgress)
      },
      setShowFullscreenBtn: function () {
        this.showFullscreenBtn = !this.showFullscreenBtn;
        console.log("showFullscreenBtn -> " + this.showFullscreenBtn)
      },
      setShowPlayBtn: function () {
        this.showPlayBtn = !this.showPlayBtn;
        console.log("showPlayBtn -> " + this.showPlayBtn)
      },
      setShowCenterPlayBtn: function () {
        this.showCenterPlayBtn = !this.showCenterPlayBtn;
        console.log("showCenterPlayBtn -> " + this.showCenterPlayBtn)
      },
      setShowLoading: function () {
        this.showLoading = !this.showLoading;
        console.log("showLoading -> " + this.showLoading)
      },
      setEnableProgressGesture: function () {
        this.enableProgressGesture = !this.enableProgressGesture;
        console.log("enableProgressGesture -> " + this.enableProgressGesture)
      },
      setObjectFit: function (objectFit : string) {
        this.objectFit = objectFit;
        console.log("objectFit -> " + this.objectFit)
      },
      setPoster: function (poster : string) {
        this.poster = poster;
        console.log("poster -> " + this.poster)
      },
      setShowMuteBtn: function () {
        this.showMuteBtn = !this.showMuteBtn;
        console.log("showMuteBtn -> " + this.showMuteBtn)
      },
      setTitle: function (title : string) {
        this.title = title;
        console.log("title -> " + this.title)
      },
      setEnablePlayGesture: function () {
        this.enablePlayGesture = !this.enablePlayGesture;
        console.log("enablePlayGesture -> " + this.enablePlayGesture)
      },
      setVslideGesture: function () {
        this.vslideGesture = !this.vslideGesture;
        console.log("vslideGesture -> " + this.vslideGesture)
      },
      setVslideGestureInFullscreen: function () {
        this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;
        console.log("vslideGestureInFullscreen -> " + this.vslideGestureInFullscreen)
      },
      setCodec: function (codec : string) {
        this.codec = codec;
        console.log("codec -> " + this.codec)
      },
      setHttpCache: function () {
        this.httpCache = !this.httpCache;
        console.log("httpCache -> " + this.httpCache)
      },
      setPlayStrategy: function (playStrategy : number) {
        this.playStrategy = playStrategy;
        console.log("playStrategy -> " + this.playStrategy)
      },
      setHeader: function (header : UTSJSONObject) {
        this.header = header;
        console.log("header -> " + JSON.stringify(this.header))
      },
      // 事件
      onPlay: function (res : UniEvent) {
        console.log(res.type);
        this.isPlaying = true;
        this.isPause = false;
      },
      onPause: function (res : UniEvent) {
        console.log(res.type);
        this.isPlaying = false;
        this.isPause = true;
      },
      onEnded: function (res : UniEvent) {
        console.log(res.type);
      },
      onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
      },
      onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
      },
      onWaiting: function (res : UniEvent) {
        console.log(res.type);
      },
      onError: function (res : UniVideoErrorEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
        this.isError = true;
      },
      onProgress: function (res : UniVideoProgressEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
      },
      onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
      },
      onControlsToggle: function (res : UniVideoControlsToggleEvent) {
        console.log(res.type + " -> " + JSON.stringify(res.detail));
      },
      // 自动化测试
      downloadSource() {
        uni.downloadFile({
          url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
          success: (res) => {
            this.localSrc = res.tempFilePath;
            this.autoTest = true;
          },
          fail: (_) => {
            this.isError = true;
          }
        })
      }
    }
  }
</script>

<style>
  .video {
    width: 100%;
    height: 200px;
  }
</style>