<template>
    <div  class="main-contain">
        <div class="position">
             <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div  class="app-container">
          <div class="title">{{videoform.title}}</div> 
          <div class="video">            
               <video id="example_video_1" class="video-js vjs-default-skin"
                     controls preload="auto" width="640" height="300"
                     poster="http://video-js.zencoder.com/oceans-clip.png"
                     data-setup='{"example_option":true}' ref="video">
                     <source :src="videoform.video_url" type='video/mp4' />
              </video>            
        </div>
      </div>
    </div>
</template>
 
<script>
    import BreadCrumb from '../components/bread-crumb'
     import { getVidoDetail } from '@/api/act/submitinfo'
    export default {
        name: "vido_detail",
        components:{
           BreadCrumb,
      },
      data(){
         return{
             crumbs: [
              { path: false, name: '文章管理' },
              { path: '/articles/vidoDetail', name: '视频详情' }
           ], 
            video: null, 
            videoform:{
                title:"",
                video_url:"",
            }
         }
      },
       methods: {
           getVidoDetail(){
               const id = this.$route.params && this.$route.params.id;
               console.log("视频详情id是什么",id);
               getVidoDetail(id,this.videoform).then(response=>{
                    if(response.data.state == 1){
                      var articles =  response.data.data.articles;                     
                      this.videoform =  response.data.data.articles;      
                      this.$refs.video.src = articles.video_url;                 
                      
                    }
               })
           }
        },
        created(){
            this.getVidoDetail();
        }
       
    }
</script>

<style scoped>
     .video {
        position: relative;
        margin-left: 200px;
    }

    .video__player {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .title{
       margin-left: 200px;
       margin-bottom: 20px;
    }

   
</style>
