配置路由 ：路由可以帶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>