siyu_app/pages/course/video/videoUni.vue

<template>
 
  <view class="es-view-w-x">
	  
    <es-nav-title title="视频播放" mode="cover"></es-nav-title>
	
    <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">
      <input class="input" placeholder="输入视频地址播放" @confirm="onSrcInputConfirm" />
      <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,
	        // 属性
	        src: "https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4",
	        autoplay: false,
	        loop: false,
	        muted: false,
	        initialTime: 0,
	        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
				}
			
			],
			
	        danmuBtn: false,
	        enableDanmu: true,
	        pageGesture: false,
	        direction: -1,
	        requestFullScreenOptions: {
	          direction: -90
	        },
	        showProgress: true,
	        showFullscreenBtn: true,
	        showPlayBtn: true,
	        showCenterPlayBtn: true,
	        showLoading: true,
	        enableProgressGesture: true,
	        objectFit: "contain",
	      
	        poster: "https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240515/23b10c32d51a4bebb6f76f5543430359.jpg",
	     
	        showMuteBtn: false,
	        title: "video-component",
	     
	        enablePlayGesture: false,
	        vslideGesture: false,
	        vslideGestureInFullscreen: true,
	        codec: "hardware",
	     
	        httpCache: true,
	        playStrategy: 0,
	       
	        header: {
	          'User-Agent': 'User-Agent test',
	          'header': 'header test',
	          'cookie': 'cookie test'
	        },
	        // API
	        pos: 10,
	        rate: 1.5,
	        danmu: {
	          text: '要显示的文本',
	          color: '#FF0000'
	        },
	        // 自动化测试
	        autoTest: false,
	        isPlaying: false,
	        isPause: false,
	        isError: false,
	        localSrc: ''
	      }
	    },
	    onLoad() {
	    },
	    methods: {
	      // API
	      play: function () {
	        console.log("play");
	        this.videoContext?.play();
	      },
	      pause: function () {
	        console.log("pause");
	        (uni.getElementById("video"))?.pause(); //as写法测试。注意id不对时as会崩溃
	        // this.videoContext?.pause();
	      },
	      seek: function (pos) {
	        console.log("seek -> " + pos);
	        this.videoContext?.seek(pos);
	      },
	      requestFullScreen: function (options) {
	        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) {
	        console.log("sendDanmu -> " + danmu);
	        this.videoContext?.sendDanmu(danmu);
	      },
	      playbackRate: function (rate) {
	        console.log("playbackRate -> " + rate);
	        this.videoContext?.playbackRate(rate);
	      },
	      // 属性
	      setSrc: function (src) {
	        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) {
	        this.initialTime = initialTime;
	        console.log("initialTime -> " + this.initialTime)
	      },
	      setDuration: function (duration) {
	        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) {
	        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) {
	        this.objectFit = objectFit;
	        console.log("objectFit -> " + this.objectFit)
	      },
	      setPoster: function (poster) {
	        this.poster = poster;
	        console.log("poster -> " + this.poster)
	      },
	      setShowMuteBtn: function () {
	        this.showMuteBtn = !this.showMuteBtn;
	        console.log("showMuteBtn -> " + this.showMuteBtn)
	      },
	      setTitle: function (title) {
	        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) {
	        this.codec = codec;
	        console.log("codec -> " + this.codec)
	      },
	      setHttpCache: function () {
	        this.httpCache = !this.httpCache;
	        console.log("httpCache -> " + this.httpCache)
	      },
	      setPlayStrategy: function (playStrategy) {
	        this.playStrategy = playStrategy;
	        console.log("playStrategy -> " + this.playStrategy)
	      },
	      setHeader: function (header) {
	        this.header = header;
	        console.log("header -> " + JSON.stringify(this.header))
	      },
	      // 事件
	      onPlay: function (res) {
	        console.log(res.type);
	        this.isPlaying = true;
	        this.isPause = false;
	      },
	      onPause: function (res) {
	        console.log(res.type);
	        this.isPlaying = false;
	        this.isPause = true;
	      },
	      onEnded: function (res) {
	        console.log(res.type);
	      },
	      onTimeUpdate: function (res) {
	        console.log(res.type + " -> " + JSON.stringify(res.detail));
	      },
	      onFullScreenChange: function (res) {
	        console.log(res.type + " -> " + JSON.stringify(res.detail));
	      },
	      onWaiting: function (res) {
	        console.log(res.type);
	      },
	      onError: function (res) {
	        console.log(res.type + " -> " + JSON.stringify(res.detail));
	        this.isError = true;
	      },
	      onProgress: function (res) {
	        console.log(res.type + " onProgress -> " + JSON.stringify(res.detail));
	      },
	      onFullScreenClick: function (res) {
	        console.log(res.type + " -> " + JSON.stringify(res.detail));
	      },
	      onControlsToggle: function (res) {
	        console.log(res.type + " -> " + JSON.stringify(res.detail));
	      },
	      onSrcInputConfirm(event) {
	        this.src = event.detail.value;
	      },
	      // 自动化测试
	      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;
  }

  .input {
    height: 40px;
    background: #FFF;
    margin: 5px 0;
  }
  
  .uni-btn-v{
	  margin: 20rpx;
	 
	  button{
		   height: 88rpx;
		   line-height: 88rpx;
		   border-radius: 10rpx;
	  }
  }
</style>