Question

我有一个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浏览器测试了相同的结果。任何建议都将非常受欢迎。

Answer 1

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

Answer 2

我不确定您是否仍然需要答案，但无论如何都会把它贴出来（因为我花了整整1天的时间，希望对您有所帮助）。

遵循这些步骤...（我的项目在vuejs中）

npm install vue-videojs7-保存

在文件中执行此操作。

<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>

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

2 个答案: