video-view.nvue

<template>
  <view class="content">
    <video-view id="video" ref="video" class="video" :src="src">
    </video-view>
    <button class="button" @click="play" type="primary">播放</button>
    <text class="tiptitle">注意：</text>
    <view class="tips">
      <text class="tip">uts组件插件video-view需要使用自定义基座才能生效！</text>
      <text class="tip">暂时仅支持uni-app x项目！</text>
      <text class="tip">暂时仅支持Android平台！</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v'
      }
    },
    methods: {
      play() {
        //uni-app 项目 nvue 页面中的调用方式
        this.$refs['video'].play();
        //uni-app x 项目 uvue 页面中的调用方式（以下方式二选一）
        // (this.$refs['video'] as VideoViewElement).play();
        // (uni.getElementById('video') as VideoViewElement).play();
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .video {
    width: 750rpx;
    height: 400rpx;
  }

  .button {
    width: 640rpx;
    margin: 10px;
  }

  .tiptitle {
    margin-top: 20px;
    font-size: 18px;
    color: darkred;
  }

  .tips {
    justify-content: flex-start;
    margin: 0px 20px;
  }

  .tip {
    color: darkred;
  }
</style>