3.增加一个组件Videoplayer 1<template>2<div class="course_node_video">3<video-player4class="video-player vjs-custom-skin"5ref="videoPlayerRef"6:playsinline="true"7:options="playerOptions"8@ready="playerReadied"9@pause="onPlayerPause($event)"10@timeupdate="onPlayerTimeupdate($event)"11customE...
<template><divclass="video"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="data.playerOptions"></video-player></div></template><script>import { reactive } from '@vue/reactivity'; export default { name: 'Video', props:['video','cover'],...
import VideoPlayer from 'vue-video-player/src' 1、安装 npm install vue-video-player -S 2、引用 全局引用 main.js: 组件内部引用 全部页面: <template> <div class='demo'> <videoPlayer class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"> </vi...
插件Github地址vue-video-player 先看一下这个播放器(vue3-video-play)的界面吧 vue3-video-play视频播放插件基于原生的HTML5的 <video>标签 开发,所以支持的视频格式和<video>一致,并且支持<video>标签的所有原生属性和方法 主页 https://xdlumia.github.io ...
1、安装 npm install vue-video-player -S 2、引用 全局引用 main.js: 组件内部引用 全部页面: <template> <div class='demo'> <videoPlayer class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"> ...
五、在需要的地方使用 VideoPlayer.vue组件 <template><video-player:options="videoOption"></video-player></template><scriptlang="ts"setup>import VideoPlayer from '@/components/VideoPlayer.vue' let videoOption = reactive({ autoplay: true, controls: true, sources: [ { src: 'xxx.m3u8', type:...
class必须是video-js,然后需要设置一个id。 最后初始化播放器: 代码语言:javascript 复制 importvideojsfrom"video.js";constplayer=videojs(playerId,{autoplay:true});player.src(url);player.on("ended",()=>{//播放完成}) 即可播放。 上面只是最简单的demo,下面来说说video.js中比较常用的功能。
所以视频插件是必不可少的。由于我⽤vue开发项⽬，所以找视频插件也找和vue贴近的。最后选择了vue-video-player。这个视频插件还是挺好⽤的，好多事件都是可控的，挺⽅便的。⾸先 npm install vue-video-player -S;然后再main.js进⾏配置：然后就可以在组件中使⽤了。常⽤参数：
Vue3使用video插件 目前可以先使用这个:有例子,有参数可以参考。 https://www.cnblogs.com/qinghuaL/p/14772806.html 地址是这个: 网上别的文章说的之前的vue-video-player,在本地搞不成功。 后来用的这个:https://github.com/enzostvs/vue3-player-video...