video

视频。 平台差异说明 属性说明 <video> 默认宽度 300px、高度 225px，可通过 css 设置宽高。 示例

  1. <template>    <view>        <view class="uni-padding-wrap uni-common-mt">            <view>                <video id="myVideo" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/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.mp4"                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>            </view>            <!-- #ifndef MP-ALIPAY -->            <view class="uni-list uni-common-mt">                <view class="uni-list-cell">                    <view>                        <view class="uni-label">弹幕内容</view>                    </view>                    <view class="uni-list-cell-db">                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />                    </view>                </view>            </view>            <view class="uni-btn-v">                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>            </view>            <!-- #endif -->        </view>    </view></template>
  1. export default {    data() {        return {            src: '',            danmuList: [{                    text: '第 1s 出现的弹幕',                    color: '#ff0000',                    time: 1                },                {                    text: '第 3s 出现的弹幕',                    color: '#ff00ff',                    time: 3                }            ],            danmuValue: ''        }    },    onReady: function(res) {        // #ifndef MP-ALIPAY        this.videoContext = uni.createVideoContext('myVideo')        // #endif    },    methods: {        sendDanmu: function() {            this.videoContext.sendDanmu({                text: this.danmuValue,                color: this.getRandomColor()            });            this.danmuValue = '';        },        videoErrorCallback: function(e) {            uni.showModal({                content: e.target.errMsg,                showCancel: false            })        },        getRandomColor: function() {            const rgb = []            for (let i = 0; i < 3; ++i) {                let color = Math.floor(Math.random() * 256).toString(16)                color = color.length == 1 ? '0' + color : color                rgb.push(color)            }            return '#' + rgb.join('')        }    }}

uni.createVideoContext 注意

  • 视频播放格式说明：

  • <video/> 组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。

  • 微信小程序视频组件文档、支付宝不支持video组件、百度小程序视频组件文档、头条小程序视频组件文档 -

  • video全屏后，如何自行绘制界面？比如加个标题、加个分享按钮

  • -
  • 如何实现抖音、映客等全屏视频垂直滑动切换效果？

-

  • <video/> 组件在非H5端是原生组件，层级高于普通前端组件，覆盖其需要使用cover-view组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0 起已支持 video 组件的同层渲染，也就是video在非全屏时，可以被前端元素通过调节zindex来遮挡，但video全屏时，仍需要cover-view覆盖。
  • 原生组件使用限制。
  • <video/> 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。
  • App平台：如果想使用非原生的video，即原来普通的html5自带video，可使用web-view组件load html页面，在其中使用普通h5 video。
  • 同层播放器。

在 GitHub 上编辑此页面！