videojs 视频播放m3u8

<template>
  <div class="trial">
    <video
      id="videoPlayer"
      class="video-js vjs-default-skin"
      controls  
      preload="auto"
      poster="/img/trial/video-bg.png"
      x-webkit-airplay="true"
      webkit-playsinline="true"
      playsinline="true"
      x5-video-player-fullscreen="true" 
      x5-video-orientation="landscape"
    />
    <!--controls 如果设置了该属性，则规定不存在作者设置的脚本控件。 -->
    <!-- preload 属性规定是否在页面加载后载入视频。 -->
    <!-- poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 -->
    <!-- x-webkit-airplay 在移动端,不默认全屏播放 -->
    <!-- webkit-playsinline 让视频在小窗内播放，也就是不是全屏播放 -->
    <!-- playsinline IOS微信浏览器支持小窗内播放 -->
    <!-- x5-video-player-fullscreen  全屏设置,设置为 true 是防止横屏-->
    <!-- x5-video-orientation  播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏-->
    <div @click="play">播放</div>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "@videojs/http-streaming";

export default {
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs("videoPlayer", {
      bigPlayButton: false, // 隐藏默认播放按钮 
      textTrackDisplay: false, // 用于显示文本跟踪提示的组件
      posterImage: true, // 是否启用静止图片
      errorDisplay: false, //显示错误
      controlBar: true, // 控制条 
      aspectRatio: '480:270', // 宽高比设定
      playbackRates: [1, 1.25, 1.5, 2] // 倍速播放
    });
    请求.then(res => {
        this.player.src({
          src: res.course.video,
          type: "application/x-mpegURL",
          withCredentials: false
        });
      })
      .catch(err => {
        console.log(err, 'error');
      });
  },
  methods:{
    play(){
      this.player.play();
    }
  }
};
</script>