video

概述

Video 组件，提供了视频播放器的功能，从1080版本开始支持全屏显示自定义组件，入门请参考教程

子组件

不支持

属性

支持通用属性

备注：如果开发者手动调用requestFullScreen方法进入全屏，将根据此方法的传入参数screenOrientation设置全屏方向。

示例代码：

<video src="xxx.mp4" orientation="portrait"></video>

样式

支持通用样式

object-fit 类型 1040+

事件

支持通用事件

方法

snapshot 方法 success 回调的返回值: data

data对象有以下属性:

snapshot 方法 fail 回调的返回值:

全屏显示自定义组件 1080+

开发者经常会遇到全屏需要显示自定义组件的场景，如“画质切换”，“分享”按钮等。在 1080 版本开始，我们加入了此特性的支持，请按照以下步骤实现即可：

1.在 video 组件非全屏情况下实现自定义组件，并正常显示（推荐使用绝对定位实现自定义组件布局）

2.将 video 组件通过 div 标签包裹，并赋值enablevideofullscreencontainer值为 true，即可完成需求

div 组件的enablevideofullscreencontainer参数说明：

示例代码

<template>
    <div enablevideofullscreencontainer="true">
        <video class="video" autoplay="false" orientation="landscape" title="快应用介绍视频"
                src="https://swsdl.vivo.com.cn/appstore/developer/uploadfile/20180323/20180323183010837.mp4">
        </video>
        <div class="button" onclick="toggleShowFlag" >
            <text class="button-text">弹幕开关</text>
        </div>
        <text class="danmu-container" show={{visible}}>awsl</text>
    </div>
</template>
<style>
    .danmu-container {
        position: absolute;
        top: 150px;
        right: -100px;
        font-size: 60px;
        color: #4c9afa;
        height: 70px;
        padding:0 30px;
    }
</style>

注意点：

1. 横竖屏切换的时候，video 的自定义组件的长度、位移等属性默认情况下会保持一致。

2. 在 video 组件切换到全屏状态后，当容器为绝对定位，通过transform样式触发变换操作，且长度单位为 px，则此时 px 的单位长度会重新计算，此时 1px 等于全屏下的screenWidth/designWidth。因此，横屏的自定义组件会比竖屏时显示的更长、更宽，此为正常现象。

3. 受注意点 2 重新计算 1px 长度影响的容器，其子节点不受影响。

4. 若需要触发 transform 操作又要保证长宽不变，可以使用dp单位，但dp单位仅在 1080 以上平台支持，需注意使用。dp 单位详情请参考文档

video   示例代码

查看示例代码

说明:

1. 支持 HTTP/HTTPS/RTSP 协议
2. 在主流的视频编码格式(如：H.263，H.264，MPEG-4 等)和主流的音频编码格式(AAC，FLAC，MP3 等)下，支持主流的音视频封装格式如：MPEG-4(.mp4)，3GPP(.3gp)，MPEG-TS(.ts，not seekable)，Matroska(.mkv)，Ogg(.ogg)等