false,status:true});constvVideoPlayerRef=ref(null);constinitPlay=()=>{letplayer=vVideoPlayerRef.value.getVueInstance();player.destroyPlayer();player.initPlayer();};constswitchVideo=()=>{letplayer=vVideoPlayerRef.value.getVueInstance();player.switchVideo();videoOption.value.status=!player....
五、在需要的地方使用 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:...
player.dispose(); } }, }; </script> 4. 配置Video.js的选项和插件 你可以在初始化时配置Video.js的各种选项,比如自动播放、控制条显示、视频源等。如果需要,你也可以引入和使用Video.js的插件。 javascript this.player = videojs(this.$refs.videoPlayer, { autoplay: false, // 自动播放 ...
在切换地址时使用player.dispose()销毁时,同时会把dom元素一起销毁 ,导致切换播放失败 可以直接使用vue3的toRaw https://cn.vuejs.org/api/reactivity-advanced.html#toraw 在切换的时候使用以下代码 player.pause(); player.reset(); toRaw(player).src({ src: videoUrl }); player.load(); player.play(...
videoUrl: '', //是否静音 hasAudio: false, status: true});const vVideoPlayerRef = ref(null);const initPlay = () => { let player = vVideoPlayerRef.value.getVueInstance(); player.destroyPlayer(); player.initPlayer();};const switchVideo = () => { let player = vVideoPlayerRef.valu...
<div ref="videoRef" class="player" /> 三、在setup中获取绑定ref 这里我们需要用到vue3提供的ref方法 <script lang="ts">import { defineComponent,ref } from 'vue'export default defineComponent({ setup () { const videoRef = ref() // 获取视频容器 //此处我们可以进行播放器的初始化 return { ...
<divref="videoRef"class="player"/> 三、在setup中获取绑定ref 这里我们需要用到vue3提供的ref方法 <scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){constvideoRef=ref()// 获取视频容器//此处我们可以进行播放器的初始化return{videoRef}}})</script> ...
initPlayer() { 代码语言:txt 复制 // new WebMediaPlayer(url,domId,callback,options) 代码语言:txt 复制 this.player = new WebMediaPlayer('', `WebMediaPlayer`, this.callbackFunc, { 代码语言:txt 复制 cbUserPtr: this, 代码语言:txt
{ const player = new Player({ id: 'vs', url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3', volume: 0.8, width: window.innerWidth, height: 45, fluid: true, mediaType: 'audio', preloadNext: true, // 预加载下一首 switchKeepProgress: ...
"x5-video-player-type": "h5", // 微信内置浏览器设置,防止被浏览器劫持 "x5-video-orientation": "portraint", /**画中画 */ pip: false, thumbnail: { height: 25, }, pipConfig: { bottom: 0, right: 0, width: 320, height: 80, ...