12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import { onMounted, ref, watch, markRaw, computed } from 'vue'
- import MuiPlayer from 'mui-player'
- import 'mui-player/dist/mui-player.min.css'
- import './index.less'
- import { getValueByTemplate } from '@cip/utils/util'
- import apiConfig from '@cip/request/apiConfig'
- export default {
- props: {
- height: {},
- autoplay: Boolean,
- src: {},
- preload: String // ['none','auto']
- },
- setup (props) {
- const videoRef = ref()
- const instance = ref()
- const _src = computed(() => {
- return getValueByTemplate(props.src, apiConfig)
- })
- const isPlay = ref(false)
- const play = () => {
- instance.value.video().play()
- isPlay.value = true
- }
- onMounted(() => {
- if (!props.preload || props.preload === 'auto') isPlay.value = true
- instance.value = markRaw(new MuiPlayer({
- container: videoRef.value,
- src: _src.value,
- height: props.height || '750px',
- autoplay: props.autoplay,
- pageHead: false,
- preload: props.preload,
- customSetting: {
- show: false
- }
- }))
- })
- watch(_src, (val) => {
- if (instance.value) {
- instance.value.reloadUrl(val)
- }
- })
- return () => <div class={'cip-dynamic-video__container'} >
- {!isPlay.value && <div class={'cip-dynamic-video__mask'}>
- <div class={'cip-dynamic-video__play'} onClick={() => play()}>
- <svg width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
- <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
- <path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/>
- <path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/>
- </svg>
- </div>
- </div>}
- <div ref={videoRef}></div>
- </div>
- }
- }
|