video.js 的 m3u8 源错误：“未找到兼容的源和播放技术。”答案

【问题标题】：m3u8 source for video.js error: "No compatible source and playback technology were found."video.js 的 m3u8 源错误：“未找到兼容的源和播放技术。”
【发布时间】：2016-03-22 19:31:14
【问题描述】：

我有一个 m3u8 源，我正在尝试通过 video.js 播放器播放。当我尝试它时，我看到一个黑屏，并且控制台日志显示消息““找不到兼容的源和播放技术。”这是 HTML：

<html>
  <head>
    <title>Test Player</title>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"
type="test/css">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
  </head>
  <body>
    <h3>Using m3u8 source</h3>
    <video id="example_video_1" class="video-js vjs-default-skin" controls
    autoplay width="640" height="360" data-setup="{}">
       <source
        src="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8"
        type="application/x-mpegURL" />
    </video>
  </body>
</html>

类型正确（即“application/x-mpegURL”），我没有看到任何 CORS 问题的迹象。我已经使用 Chrome 和 Firefox 浏览器进行了测试，结果相同。任何建议将不胜感激。

【问题讨论】：

标签： javascript video.js m3u8

【解决方案1】：

您需要包含 videojs-contrib-hls 才能为没有原生支持的浏览器添加 HLS 支持。 Example

【讨论】：

【解决方案2】：

我不确定您是否仍然需要答案，但无论如何我都会发布它（因为我花了一整天的时间，我希望这会对某人有所帮助）。

按照这些步骤...（我的项目在 vuejs 中）

npm install vue-videojs7 --save

在您的文件中执行此操作。

<template>
  <div class="player">
    <h3>Using Html5 to play m3u8 media file</h3>
    <video-player ref="videoPlayer"
                  class="vjs-custom-skin"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @ready="onPlayerReady($event)">
    </video-player>
  </div>
</template>

<script>
import Vue from 'vue'
import { videoPlayer } from 'vue-videojs7'
import videojs from 'video.js'

export default {
  components: {
    VideoPlayer
  },
  data () {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        }
        // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'
      }
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    onPlayerPlay (player) {
      console.log('player play!', player)
    },
    onPlayerReady (player) {
      console.log('player ready!', player)
      this.player.play()
    },
    playVideo: function (source) {
      const video = {
        withCredentials: false,
        type: 'application/x-mpegurl',
        src: source
      }
      this.player.reset() // in IE11 (mode IE10) direct usage of src() when <src> is already set, generated errors,
      this.player.src(video)
      // this.player.load()
      this.player.play()
    }
  },
  mounted () {
    const src = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
    this.playVideo(src)
  }
}
</script>

【讨论】：