关于vue3中video标记(videojs和videojs-markers)

关于vue3中video标记(videojs和videojs-markers)

1、首先安装

npm install videojs
npm install videojs-markers

2、页面引入

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

3、html

<video  ref="videoPlayer" class=" video video-js vjs-default-skin vjs-big-play-centered"></video>

4、javascript

const videoPlayer = ref(null)
const player = ref(null)
const options = ref({
    autoplay: 'muted',//自动播放
    height: 500,
    width: 800,
    controls: true,//用户可以与之交互的控件
    loop: true,//视频一结束就重新开始
    muted: false,//默认情况下将使所有音频静音
    playsinline: true,
    webkitPlaysinline: true,
    // aspectRatio:"16:9",//显示比率
    playbackRates: [0.5, 1, 1.5, 2],
    fullscreen: {
        options: { navigationUI: 'hide' }
    },
    sources: [
        {
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            type: "video/mp4"
        },
    ]
})
const init = () => { 
    player.value = videojs(
        videoPlayer.value,
        options.value,
        function onPlayerReady() {
            console.log('onPlayerReady')
        }
    )
    player.value.markers({
        // 不显示鼠标悬浮标记提示文字
        markerTip: {
            display: false
        },
        markerStyle: {
            'width': '7px',
            'background-color': 'red',
            'border-radius': '50%',
        },
        markers: [
            {
                time: 0.694313,
                class: 'custom-marker-class'
            },
            {
                time: 5.694313,
                class: 'custom-marker-class'
            },
            {
                time: 10.694313,
                class: 'custom-marker-class'
            },
            {
                time: 15.694313,
                class: 'custom-marker-class'
            }
        ]
    });
    player.value.on("timeupdate", function (event) {
        console.log(this.currentTime());
    });
}
//Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)
// at videojs (video.es.js:25332:11)
// at init (evaluate.vue:156:20)
// at setup (evaluate.vue:199:9)
// 不用nextTick,会报以上错误，谨慎操作
onMounted(() => {
    nextTick(() => {
        init()
    })
})

5、vue3做的video标记展示

就结束了，有用请收藏啊，各位