mmjs-core/dist/cjs/components/optimizedVideoPlayer/optimizedVideoPlayer2.js

mmjs-core hooks component vue

"use strict";const l=require("vue"),D=require("video.js");require("video.js/dist/video-js.css");const L=require("./const.js"),_=require("lodash-es"),j=l.defineComponent({name:"OptimizedVideoPlayer",props:{src:{type:[String,Object],required:!0},controlBar:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})},playerId:{type:String,default:()=>`video-player-${Math.random().toString(36).substring(2,9)}`},bandwidthOptionProps:{type:Object,default:()=>L.BANDWIDTH_PRESETS},poster:{type:String,default:""},intersectionThreshold:{type:Number,default:.5,validator:n=>n>=0&&n<=1},bandwidthPreset:{type:String,default:"custom"},bandwidthLimit:{type:Number,default:3e5,validator:n=>n>=1e5},showControls:{type:Boolean,default:!0},showBandwidthSelector:{type:Boolean,default:!0}},emits:["ready","play","pause","ended","error","bandwidth-change"],setup(n,{emit:o,expose:b}){const t=l.shallowRef(null),r=l.shallowRef(null),c=l.shallowRef(null),u=l.shallowRef(!1),i=l.shallowRef(n.bandwidthPreset);let s=null;const v=l.computed(()=>{const e={...n.bandwidthOptionProps};return n.bandwidthPreset!=="custom"&&delete e.custom,e}),h=l.computed(()=>{var e;return i.value==="custom"?n.bandwidthLimit:(e=v.value[i.value])==null?void 0:e.value}),B=l.computed(()=>_.merge({autoplay:!0,controls:n.showControls,muted:!0,fluid:!0,preload:"auto",liveui:!1,controlBar:n.controlBar,html5:{nativeControlsForTouch:!1,vhs:{overrideNative:!0,bandwidth:h.value,enableLowInitialPlaylist:!0,limitRenditionByPlayerDimensions:!1}}},n.options)),P=()=>{if(t.value)return;const e=document.getElementById(n.playerId);e&&(t.value=D(e,B.value,()=>{o("ready",t.value)}),E(),O(),R(),f(n.src))},f=e=>{t.value&&(typeof e=="string"?t.value.src({src:e,type:"application/x-mpegURL"}):t.value.src(e))},E=()=>{t.value&&(t.value.on("play",()=>o("play")),t.value.on("pause",()=>o("pause")),t.value.on("ended",()=>o("ended")),t.value.on("error",()=>o("error")))},O=()=>{!t.value||!r.value||(s=new IntersectionObserver(e=>{e.forEach(a=>{var d;t.value&&(a.isIntersecting?!document.hidden&&t.value.autoplay()&&((d=t.value.play())==null||d.catch(m=>{console.log("播放被阻止:",m),o("error",m)})):(t.value.pause(),o("pause")))})},{threshold:n.intersectionThreshold,root:null}),s.observe(r.value))},R=()=>{document.addEventListener("visibilitychange",p)},p=()=>{var e;t.value&&(document.hidden?(t.value.pause(),o("pause")):r.value&&S(r.value)&&((e=t.value.play())==null||e.catch(a=>{console.log("播放被阻止:",a),o("error",a)})))},S=e=>{const a=e.getBoundingClientRect();return a.top>=0&&a.left>=0&&a.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&a.right<=(window.innerWidth||document.documentElement.clientWidth)},y=e=>{var a,d;(d=(a=t.value)==null?void 0:a.tech_)!=null&&d.vhs&&(t.value.tech_.vhs.bandwidth=e,t.value.tech_.vhs.throughput=e,o("bandwidth-change",e))},I=e=>{i.value!==e&&(i.value=e),u.value=!1};function C(){setTimeout(()=>{u.value=!1},100)}const T=()=>{u.value=!u.value,u.value&&l.nextTick(()=>{var e;(e=c.value)==null||e.focus()})},w=()=>{s&&(s.disconnect(),s=null),document.removeEventListener("visibilitychange",p),t.value&&(t.value.dispose(),t.value=null)};l.watch(()=>n.src,e=>f(e)),l.watch(h,e=>y(e)),l.watch(()=>n.showControls,e=>{t.value&&t.value.controls(e)}),l.watch(()=>n.bandwidthPreset,e=>{i.value=e}),l.onMounted(P),l.onBeforeUnmount(w);const g={play:()=>{var e;return((e=t.value)==null?void 0:e.play())||Promise.reject("Player not initialized")},pause:()=>{var e;return(e=t.value)==null?void 0:e.pause()},dispose:w,getPlayer:()=>t.value,setBandwidth:e=>{typeof e=="string"?i.value=e:(i.value="custom",y(e))},toggleControls:e=>{if(t.value){const a=typeof e=="boolean"?e:!t.value.controls();t.value.controls(a)}},showBandwidthDialog:()=>{u.value=!0,l.nextTick(()=>{var e;(e=c.value)==null||e.focus()})},hideBandwidthDialog:()=>{var e;(e=c.value)==null||e.blur(),u.value=!1}};return b(g),{containerRef:r,popupRef:c,isShowBandwidthDialog:u,currentBandwidthPreset:i,bandwidthOptions:v,toggleBandwidthDialog:T,selectBandwidth:I,popupBlur:C,...g}}});module.exports=j;