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"
      　　　
      x5-video-player-type="h5"
    />
    <!--controls 如果设置了该属性，则规定不存在作者设置的脚本控件。 -->
    <!-- preload 属性规定是否在页面加载后载入视频。 -->
    <!-- poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 -->
    <!-- x-webkit-airplay 在移动端,不默认全屏播放 -->
    <!-- webkit-playsinline 让视频在小窗内播放，也就是不是全屏播放 -->
    <!-- playsinline IOS微信浏览器支持小窗内播放 -->
    <!-- x5-video-player-fullscreen  全屏设置,设置为 true 是防止横屏-->
    <!-- x5-video-orientation  播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏-->
    <!-- x5-video-player-type="h5" 启用H5播放器,是wechat安卓版特性 -->
    <!-- style="object-fit:fill" 加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小 -->
    <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>