Video 视频

视频播放器

基本用法

<nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>

source 属性：设置视频地址和格式类型，可设置多种视频文件格式以便支持不同浏览器的解析支持，一般采用：MP4、webm、ogv 等格式

options 属性：设置视频的播放参数，如：autoplay、controls、poster、loop、volume 等

export default {
    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
            },
        }
    },
    methods: {
        play(elm){
            console.log('play',elm)
        },
        pause(e){
            console.log('pause')
        },
        playend(e){
            alert('播放结束')
        }
    }
};

自动播放

autoplay 属性设置视频自动播放

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

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

初始化静音

muted 属性设置视频初始化静音

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

export default {
    data() {
        return {
            options3: {
                controls: true,
                muted: true
            },
        }
    },
};

视频封面海报设置

poster 属性设置视频海报

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

export default {
    data() {
        return {
            options4: {
                controls: true,
                poster: 'https://img10.360buyimg.com/ling/s640x356_jfs/t1/96045/31/13848/43886/5e5e35ffE68170c74/861a6394e38810f0.png',
            },
        }
    },
};

行内播放

playsinline 属性设置移动端视频行内播放，阻止新打开页面播放（兼容 ios，兼容部分安卓机）

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

export default {
    data() {
        return {
            options5: {
                playsinline: true,
                controls: true,
            },
        }
    },
};

视频背景图

当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true，移动端需要设置 playsinline 行内展示

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

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

视频切换

当视频地址发生变化时，重置视频

      <div class="video-con" >
        <nut-video :sources="sources1" :options="options"></nut-video>
    </div>

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

Prop

Event