The M3U8 address can be played in VLC but not on the Web

[hugselina2019]

Description

Briefly describe the issue. Include a reduced test case, we have a starter template on JSBin you can use.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Using VideoJS in vue-cli4 (video: 7.10.4), 2.Refer to the vue example given by the official website to use vue components 3.The playback address(http://60.10.20.120:7086/live/cameraid/1000267%240/substream/1.m3u8) can be played in VLC, and the playback error in Web is shown in Figure 3 below

code there parent page

<template>
  <div class="contain">
    <video-player :options="videoOptions" />
  </div>
</template>

<script>
import videoPlayer from './video-comp'

export default {
  components: {
    videoPlayer
  },
  name: "VideoExample",
  data () {
    return {
       videoOptions: {
        autoplay: false,
        controls: true,
        techOrder: ['html5'],
        sources: [
          {
            type: "application/x-mpegURL",
            withCredentials: false,
            // src: "rtmp://live.hkstv.hk.lxdns.com/live/hks",
            // src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8",
            src: "http://xx.xx.xx.120:7086/live/cameraid/1xxxx7%24xx/substream/1.m3u8"
          }
        ],
      },
    }
  }
};
</script>

components page:

<template>
  <video 
    ref="videoPlayer" 
    class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="280"
    data-setup="{}">
  </video>
</template>

<script>
import 'video.js/dist/video-js.css'
import videojs from "video.js";

export default {
  name: "VideoPlayer",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      }
    );
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

Results

Expected

It can play normally

Actual

can not play

Error output

video.es.js?f0e2:100 VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) Playback cannot continue. No available working or supported playlists.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

7.10.4

browsers

chrome

[hugselina2019]

Hope to have encountered this kind of problem of the great gods to help answer, thank you very much

[hugselina2019]

问题已经找到了原因 是由于hls的码流是H265， 查询了一下issue很遗憾现在videojs不支持H265，期待早日支持 （问题中的地址已经和谐了 感谢）

[mister-ben]

H.265 support depends on the browser. https://caniuse.com/hevc