nutui/src/packages/video/doc.md

Video 视频

视频播放器

基本用法

<nut-video :sources="sources" :options="options"></nut-video>

export default {
  methods: {
    data() {
        return {
            sources: [
                {
                    src:
                        'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
                    type: 'video/mp4'
                }
            ],
            options: {
                controls: true
            },

    },
  }
};

自动播放

<nut-video :sources="sources" :options="options2"></nut-video>

export default {
  methods: {
    data() {
        return {
            options2: {
                autoplay: true,
                volume: 0.6,
                poster: ''
            },

    },
  }
};

初始化静音

<nut-video :sources="sources" :options="options3"></nut-video>

export default {
  methods: {
    data() {
        return {
            options3: {
                controls: true,
                volume: 0.6,
                poster: '',
                muted: true
            },

    },
  }
};

视频背景图

行内展示，自动播放，循环播放，不可操作，静音

<nut-video :sources="sources" :options="options4"></nut-video>

export default {
  methods: {
    data() {
        return {
            options4: {
                autoplay: true,
                volume: 0.6,
                poster: '',
                muted: true,
                disabled: true,
                playsinline: true,
                loop: true
            },

    },
  }
};

Prop

字段	说明	类型	默认值
sources	视频地址和类型设置	Array	-
options	控制视频播放属性	Object	required
options.autoplay	是否自动播放	Boolean	false
options.poster	海报设置	String	-
options.loop	是否循环播放	Boolean	false
options.controls	是否展示操作栏	Boolean	true
options.muted	是否静音	Boolean	false
options.disabled	是否自动播放	Boolean	false
options.playsinline	是否设置为行内播放元素（解决安卓兼容问题）	Boolean	false