vue中使用video标签播放MP4，m3u8格式视频

参考：https://xiehao.blog.youkuaiyun.com/article/details/107109514

一，播放MP4视频

<video
     src="/video/suanfa.mp4"
     controls
     width="100%"
     height="100%"
     poster="/video/img_cover.png" //视频初始封面地址。可选
></video>

目录结构：

二，播放m3u8格式视频

比如播放m3u8格式的监控摄像头的视频:

https://gcalic.v.myalicdn.com/gc/jsh02_1/index.m3u8?contentid=2820180516001

在线播放m3u8视频：HLSPlayerplay m3u8 HTTP Live Streaming (HLS)https://www.hlsplayer.org/

 

 vue2

首先安装

 cnpm i -S video.js
 cnpm i -S videojs-contrib-hls

在main.js文件中引入css 

//  main.js中引入css
import 'video.js/dist/video-js.css'

在使用的.Vue文件中,引入video.js和video-contrib-bls 

import videojs from 'video.js'
import 'videojs-contrib-hls'

src可以设置成动态修改 

注意：宽高设为具体的值

<template>
    <div>
        <video
          id="my-video"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          style="width:700px;height:400px"
        >
            <source
                src="https:xxx.m3u8"
                type="application/x-mpegURL"
            />
        </video>
    </div>
</template>

播放

export default {
    mounted() {
        videojs("my-video",
            function() {
            this.play();
        });
    }
};

效果图：

vue3

安装

npm i -S video.js

组件内导入

import videojs from 'video.js';
import 'video.js/dist/video-js.css';

使用：

                        <video
                            ref="videoPlayerRef"
                            class="video-js vjs-default-skin"
                            style="width: 300px; height: 200px"
                        ></video>

import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const videoPlayerRef = ref();
const myPlayer = ref();
onMounted(() => {
    myPlayer.value = videojs(videoPlayerRef.value, {
        // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
        controls: true, //视频控件
        autoplay: true, //自动播放
        sources: [
            {
                src: `https://gcalic.v.myalicdn.com/gc/jsh02_1/index.m3u8?contentid=2820180516001`, //播放视频地址
                type: 'application/x-mpegURL', //播放m3u8需要设置的格式
            },
        ],
        controlBar: {
            remainingTimeDisplay: {
                displayNegative: false,
            },
        },
        playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
    });
});
onUnmounted(() => {
    if (myPlayer.value) {
        myPlayer.value.dispose();
    }
});

效果：

方式2：通过<source>标签

修改样式：

    :deep(.vjs-button > .vjs-icon-placeholder:before) {
        position: relative;
    }