基于vue使用videojs播放m3u8直播流

城北徐公美不

已于 2023-02-16 15:28:55 修改

阅读量1.8k

点赞数

分类专栏：每日一踩坑文章标签： vue.js javascript 前端前端框架

于 2023-02-16 10:43:16 首次发布

本文链接：https://blog.csdn.net/m0_54788390/article/details/129055181

版权

每日一踩坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近遇到项目中使用m3u8直播流的需求，原生h5的video标签不支持该类型的视频资源，所以选择使用videojs

<template>
  <div class="video-box">
    <video id="myVideo"
            class="video-js vjs-default-skin"
            autoplay="false"
            width="422px"
            preload="auto"
            playsinline>
      <source src="http://*******.m3u8" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>  
import videojs from "video.js";
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls";     // 支持 m3u8 格式、并且是 hls 流，因为videojs支持多平台播放，主要用以兼容处理
export default {
  components: {

  },
  data () {
    return { 

    }
  },
  mounted () { 
    this.getVideo();   // 如果出现获取不到dom 可以用异步处理一下
  },
  methods: { 
    getVideo () { 
      videojs('myVideo', {
         controls: true, // 是否显示控制条
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: true,  // 是否显示封面
        errorDisplay: false,
        controlBar: true
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.video-box {
   video {
    width: 100%;
    height: 100%;
    object-fit: fill;   // 用以去除视频黑边，将视频撑满
  }
  ::v-deep .video-js .vjs-big-play-button {
    font-size: 20px;
    width: 50px;
    height: 50px;
    top: 20px;
    left: 20px;   // 控制播放按钮的位置
  }
}
 
</style>

通过以上视频应该就可以正常播放，同时要注意视频的资源格式，可以使用VLC或者PotPlayer直接查看对应网络资源的文件信息，同时注意，h265视频资源在web端是不被支持的，会导致浏览器如下报错！！！（注意文件格式，普遍格式为h264，不过若是监控设备一般都可以让提供方直接转换，别的方法那就自行参悟，也欢迎互相指点学习）

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) Playback cannot continue. No available working or supported playlists. ma {code: 3, message: 'Playback cannot continue. No available working or supported playlists.'}