video播放器组件及七牛云视频托管

视频播放组件

配置路由 ：路由可以带pk，在vue后端可以拿到
	{
        path: '/free/detail/:pk',
        name: 'FreeCourseDetail',
        component: FreeCourseDetail
    },
    
安装 vue-video播放器
	-cnpm install vue-video-player
	-在main.js中配置
        // vue-video播放器
        require('video.js/dist/video-js.css');
        require('vue-video-player/src/custom-theme.css');
        import VideoPlayer from 'vue-video-player'
        Vue.use(VideoPlayer);
        
组件

<template>
                    <videoPlayer class="video-player vjs-custom-skin"
                                 ref="videoPlayer"
                                 :playsinline="true"
                                 :options="playerOptions"
                                 @play="onPlayerPlay($event)"
                                 @pause="onPlayerPause($event)">
                    </videoPlayer>  
</template>

<script>
    // 加载组件
    import {videoPlayer} from 'vue-video-player';

    export default {
        name: "Detail",
        components: {
            Header,
            Footer,
            videoPlayer, // 注册组件
        }，
        data() {
            return {
                playerOptions: {
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    sources: [{ // 播放资源和资源格式
                        type: "video/mp4",
                        src: "http://qe5smxg12.bkt.clouddn.com/3%20%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0.mp4" //你的视频地址（必填）
                    }],
                }
            }
        },
        methods: {
            onPlayerPlay() {
                // 当视频播放时，执行的方法
                console.log('视频开始播放')
                //加广告
            },
            onPlayerPause() {
                // 当视频暂停播放时，执行的方法
                console.log('视频暂停，可以打开广告了')
                //盖张图片
            },
        },
    }
</script>

七牛云视频托管

# 1 注册七牛云，实名认证
	https://www.qiniu.com/
# 2 登录---》管理控制台---》对象存储
# 3 新建空间----》上传视频--》拿到视频连接