@文心快码vue3使用 video.js 文心快码 在Vue 3项目中使用Video.js,可以按照以下步骤进行: 1. 安装并引入Video.js库 首先,你需要在Vue 3项目中安装Video.js。你可以使用npm或yarn来安装它: bash npm install video.js 或者 bash yarn add video.js 然后,在你的Vue组件中导入Video.js及其CSS样式: ...
上面只是最简单的demo,下面来说说video.js中比较常用的功能。 配置 在创建videojs的时候,第一个参数是对应的是播放器元素,可以是id也可以是DOM Element;第二个参数是options,即播放器的相关配置。 这里我们说几个比较常用的,所有配置大家可以参考官网https://videojs.com/guides/options/ aotuplay 自动播放,它有五...
1.安装依赖(亲测5.0.1版本可用,最新版本会找不到'vue-video-player/src/custom-theme.css'这个样式) yarn add vue-video-player@5.0.1 2.main.js里增加以下代码 1import VideoPlayer from 'vue-video-player/src'2import 'video.js/dist/video-js.css'3require('vue-video-player/src/custom-theme.css')...
目前可以先使用这个:有例子,有参数可以参考。 https://www.cnblogs.com/qinghuaL/p/14772806.html 地址是这个: 网上别的文章说的之前的vue-video-player,在本地搞不成功。 后来用的这个:https://github.com/enzostvs/vue3-player-video 这个作者还在更新,我看到十几天前还在更新代码。 作者的官网:还是很炫酷...
可以直接使用vue3的toRaw https://cn.vuejs.org/api/reactivity-advanced.html#toraw 在切换的时候使用以下代码 player.pause(); player.reset(); toRaw(player).src({ src: videoUrl }); player.load(); player.play(); 就可以解决了
开始使用 全局使用 import { createApp } from 'vue' import App from './App.vue' let app = createApp(App) import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css app.use(vue3videoPlay) ...
五、在需要的地方使用 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:...
video.value.play(); playing.value = true; } }; <script> 使用axios提交表单数据,上传file类型图片 2. 请求 //上传截图文件 export async function uploadImg(params: FormData): AsyncHttpResp<string> { return await post<string>('/function/screenshot/upload', params, { headers: { "Content-Type"...
基于vue3的video组件使用于MP4,m3u8,rtmp Apr 3, 2024 src 1.完善滚动条拖拽 Jul 18, 2024 .gitignore 基于vue3的video组件使用于MP4,m3u8,rtmp Apr 3, 2024 README.md 修改初始化 Apr 16, 2024 index.html 基于vue3的video组件使用于MP4,m3u8,rtmp ...
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"> ...