video视频播放器-西瓜播放器xgplayer_西瓜视频播放器禁用mini播放器点击-优快云博客

本文链接：https://blog.youkuaiyun.com/lyj168997/article/details/144562914
以下代码为片段提取，不可直接运行，仅供参考
<html>
<div class="item-video" 
	:id="'videoplayerId'+item.id"
	@click="videoClick(item,i)"
	@touchstart="handleTouchStart(item,i)"
	@touchmove="handleTouchMove(item,i)"
	@touchend="handleTouchEnd(item,i)">
</div>
<div class="xgplayer" style="height: 10vw;" :id="'controls_new_root'+item.id"></div>

</html>
<script>
import Player , { Events }from 'xgplayer'
import "xgplayer/dist/index.min.css";
/* 设置播放器 */
function setPlayer(item: InfoItem, index: number,setStartTime:boolean=false,orgItem:InfoItem) {
	if (!document.getElementById('videoplayerId' + item.id)) {
		return;
	}
	let startTime = Number(localStorage.getItem('playtime-' + item.id));
	localStorage.removeItem('playtime-' + item.id);
	item.player = new Player({
		...videoPlayerOptions,
		id: 'videoplayerId' + item.id,
		poster: item.playbill,
		url: item.url,
		autoplay: index==0,
		ignores: ['fullscreen'],
		playbackRate: [],
		loop: true,
		autoplayMuted:false,
		// controls: true,
		miniprogress:true,
		videoFillMode: 'contain', // 宽高不够自动底色填充（fill拉伸填充等...）
		volume: 1,
		controls: {
			mode:'flex',
			autoHide: false,
			root: document.getElementById('controls_new_root'+item.id)  // 指定播放器之外挂载dom
		},
		startTime: setStartTime?(startTime || 0):0,
		// disableGesture:true,
	});
	item.player.video.setAttribute('poster', item.playbill);//安卓封面问题兼容
	if (setStartTime) {
		currentPlayer = {
			player: item.player,
			id:item.id
		} 
	}
	item.player.on(Events.LOADED_DATA, (val: any) => {
		//主要是解决苹果端首次进入未播放进度条为00:00的问题
		list.value[index].playShow = true;
		// list.value[index].videoTime = secondsToHHMMSS(val.duration);
	})
	item.player.on(Events.PLAY, (val: any) => {
		item.logTimer = setTimeout(() => {
			setLog({ operDuration: 3 }, item)
		}, 3000);
		item.playTimer = setInterval(() => {
			orgItem.playTimeNum+=1;
		}, 1000);
	})
	item.player.on(Events.PAUSE, (val: any) => {
		clearTimeout(item.logTimer);
		clearInterval(item.playTimer);
	})
	item.player.on(Events.USER_ACTION, (data: any) => { 
		if (data.action == "switch_play_pause") {
			clearTimeout(longPressTimeout);
			item.player.playbackRate = 1;
		}
	})
}
/* 视频播放器公用配置 */
const videoPlayerOptions = {
	// muted: true, // 是否静音
	// width: 'calc(100vw - 70px)',
	// height: 'calc(133vw - 93px)', // 视频宽高尺寸
	autoplayMuted: true, // 是否自动播放（静音播放）
	defaultMuted: true,
	videoInit: true, // 是否默认初始化video，默认初始化，默认true
	playsinline: true, // 是否启用内联播放模式，仅移动端生效
	defaultPlaybackRate: 1, // 默认播放速度（可选：0.5/0.75/1/1.5/2等）
	// volume: 0.72, // 播放音量（可选：0 ~ 1）
	loop: true, // 是否循环播放，默认不循环播放
	startTime: 0, // 点播模式下，初始起播时间
	videoAttributes: {}, // video扩展属性，暂且不配置
	lang: 'zh-cn', // 播放器初始显示语言，设置为中文
	preload: 'auto',
	gradient: 'none',//是否启用上下渐变阴影，
	icons: {
		loadingIcon: () => {
		  const dom = Util.createDom('div', '<svg data-v-63161505="" width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" data-v-77f99af2=""><path d="M40 40l8.201-8.201c4.53-4.53 11.873-4.53 16.402 0A11.598 11.598 0 0 1 68 40c0 6.405-5.193 11.598-11.598 11.598a11.598 11.598 0 0 1-8.201-3.397L40 40l-8.201-8.201c-4.53-4.53-11.873-4.53-16.402 0A11.598 11.598 0 0 0 12 40c0 6.405 5.193 11.598 11.598 11.598 3.076 0 6.026-1.222 8.201-3.397L40 40z" stroke-dasharray="160" stroke-linecap="round" stroke="#FE3666" stroke-width="7" fill="none" fill-rule="evenodd"><animate id="b" attributeName="stroke-dashoffset" begin="0s;a.end" dur="500ms" from="0" to="155" calcMode="linear"></animate><animate id="a" attributeName="stroke-dashoffset" begin="b.end" dur="500ms" from="165" to="320" calcMode="linear"></animate></path></svg>', {}, 'slInfo-loadingIcon')
		  return dom
		},// 通过function方式 返回一个dom
	},
	enter: {
		innerHtml: `<div class="enter" style="    width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;">
					<svg data-v-63161505="" width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" data-v-77f99af2=""><path d="M40 40l8.201-8.201c4.53-4.53 11.873-4.53 16.402 0A11.598 11.598 0 0 1 68 40c0 6.405-5.193 11.598-11.598 11.598a11.598 11.598 0 0 1-8.201-3.397L40 40l-8.201-8.201c-4.53-4.53-11.873-4.53-16.402 0A11.598 11.598 0 0 0 12 40c0 6.405 5.193 11.598 11.598 11.598 3.076 0 6.026-1.222 8.201-3.397L40 40z" stroke-dasharray="160" stroke-linecap="round" stroke="#FE3666" stroke-width="7" fill="none" fill-rule="evenodd"><animate id="b" attributeName="stroke-dashoffset" begin="0s;a.end" dur="500ms" from="0" to="155" calcMode="linear"></animate><animate id="a" attributeName="stroke-dashoffset" begin="b.end" dur="500ms" from="165" to="320" calcMode="linear"></animate></path></svg>
				 </div>`
	}
	// fluid: true, // 是否流式布局（宽高优先于流失布局，默认16:9）注掉上方宽高看效果
	// fitVideoSize: 'fixed', // 保持容器宽/高，不做适配，按照容器来
	// seekedStatus: 'play', // 跳转后继续播放
	// controlsList: ['nodownload','nofullscreen','noremoteplayback'],
	// controls:false
	// cssFullscreen: false,
	// controls: {
	// 	autoHide: false
	// }

}
<script>