vue和jquery中使用videoJs播放m3u8格式视频流

vue中

下载

npm i video.js
npm i videojs-contrib-hls

引入

import Videojs from “video.js”;
import “video.js/dist/video-js.css”;
import “videojs-contrib-hls”;

// 播放视频
<template>
<div style="height: 20vh">
            <video
              ref="videoPlayer"
              id="videoPlayer"
              style="width: 100%; height: 100%"
              class="video-js"
            ></video>
          </div>
</template>
<script>
    getVideos(now) {
      this.player = Videojs(this.$refs.videoPlayer,{
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },);
      this.player.src([
        {
          src: now,
          type: "application/x-mpegURL",
        },
      ]);
    },
</script>

视频全屏播放

<style>
video {
    object-fit: cover;
}
</style>

jquery中

引入
’

'

使用

// 视频
addCamera(url)
function addCamera(nowPlayVideoUrl) {
    const option = {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true // 显示播放的控件
    }
    player = videojs('videoBox', option)
    player.src([{
        src: nowPlayVideoUrl,
        type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
    }])
}