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>