<template>

  <div class="player">
    <h1 class="h1title" >
      {{titles[0].title}}
    </h1>
    <div class="code">
      <p>
        <span style="color:#64451D;"><span style="color:#00D5FF;"></span></span>//<span>现在我们使用西瓜视频播放器</span>
      </p>
      <p>
        <span style="color:#00D5FF;">npm </span><span style="color:#E53333;">install </span><span style="color:#00D5FF;"><span style="color:#60D978;">xgplayer-vue@latest</span><span style="background-color:#000000;color:#60D978;"></span></span>
      </p>

    </div>
    <h1 class="h1title" >
      {{titles[1].title}}
    </h1>
    <div class="code">
    <pre class="prettyprint lang-js">  // 导入组件
  import Xgplayer from 'xgplayer-vue';
    export default {
        name: "xgplayer",
      components : {
        Xgplayer
      },
}</pre>
    </div>
    <h1 class="h1title" >
      {{titles[2].title}}
    </h1>
    <div class="code">
      <pre>&lt;<span class="pl-ent" style="color:#22863A;">Xgplayer</span> <span class="pl-e" style="color:#6F42C1;">:config</span>=<span class="pl-s" style="color:#032F62;"><span class="pl-pds">"</span>config<span class="pl-pds">"</span></span> <span class="pl-e" style="color:#6F42C1;">@player</span>=<span class="pl-s" style="color:#032F62;"><span class="pl-pds">"</span>Player = $event<span class="pl-pds">"</span></span>/&gt;</pre>
    </div>
    <h1 class="h1title" >
      {{titles[3].title}}
    </h1>
    <div class="code">
      <pre class="prettyprint lang-js">
<pre class="prettyprint lang-js">      config: {
            id: 'vs',
            url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
            // autoplay: true,
            playsinline: true,
            width: 300,
            height: 200,
          },
          Player: null</pre>
<br />
</pre>
    </div>
    <component :is=" comName "></component>

    <h1 class="h1title">
      {{titles[4].title}}
    </h1>
    <div class="code">
      <p>github</p>
      <a :href="getURL(urls[0])" target="_blank" rel="noopener noreferrer">{{urls[0]}}</a>
      <p>西瓜视频api</p>
      <a :href="getURL(urls[1])" target="_blank" rel="noopener noreferrer">{{urls[1]}}</a>
    </div>
    <h1 class="h1title">
      {{titles[5].title}}
    </h1>
    <div class="code">
<pre class="prettyprint lang-js">
<pre class="prettyprint lang-js">&lt;template&gt;
  &lt;Xgplayer :config="config" @player="Player = $event"/&gt;
&lt;/template&gt;

&lt;script&gt;
  // 导入组件
  import Xgplayer from 'xgplayer-vue';
    export default {
        name: "xgplayer",
      components : {
        Xgplayer
      },

      data() {
        return {
          titles: [
            {
              title: '插入视频'
            },
            {
              title: '进一步配置'
            },
            {
              title: '相关资料'
            }
          ],
          config: {
            id: 'vs',
            url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
            // autoplay: true,
            playsinline: true,
            width: 300,
            height: 200,
          },
          Player: null
        }

      },
      mounted(){
        // this.Player.play()
        // this.Player.on('play', ()=&gt;{console.log('play')})

      },
    }
&lt;/script&gt;

&lt;style scoped&gt;

&lt;/style&gt;
</pre>
<br />
</pre>
    </div>
    </div>
</template>

<script>
  // 导入组件

    export default {
      components : {
        Xgplayer :  () => import('../xgplayer'),
      },
        name: "xgplayerDoc",
      data() {
        return {
          comName : 'Xgplayer',

          titles: [
            {
              title: '下载西瓜视频插件'
            },
            {
              title: '导入依赖'
            },
            {
              title: '在模板template 里面添加布局'
            },
            {
              title: '设置相关配置自动播放等'
            },
            {
              title: '相关资料'
            },
            {
              title: '自定义Xgplayer组件完整代码'
            },
          ],
          urls : [
            'https://github.com/bytedance/xgplayer-vue',
            'http://h5player.bytedance.com/api/'
          ]
        }

      },
      created(){

      },
      mounted(){
        // this.Player.play()
        // this.Player.on('play', ()=>{console.log('play')})

      },

      methods:{
        getURL(url){
          let strURL = "";
          if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
            strURL = url;
          }else{
            strURL = "http://" + url;
          }
          return strURL;
        }
      },
      computed: {
      }
    }
</script>

<style scoped>
  .h1title{
    margin-left: 1rem;
    margin-bottom: 1rem;
    /*文字不能被选中*/
    user-select: none
  }
  #mse {flex:auto;}
</style>
