<script setup>
import {
ref,
reactive,
getCurrentInstance,
onMounted,
nextTick,
} from 'vue';
import Hls from 'hls.js';
import { useRouter, useRoute } from 'vue-router';
import Artplayer from 'artplayer'
import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
let player = null;
const initPlayer = () => {
//隐藏右键菜单
Artplayer.CONTEXTMENU = false
//自动回放功能的最大记录数，默认为 10
Artplayer.AUTO_PLAYBACK_MAX = 20
//自动回放功能的最小记录时长，单位为秒，默认为 5
Artplayer.AUTO_PLAYBACK_MIN = 10
player = new Artplayer({
container: '.artplayer-app',
url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
type: 'm3u8',
theme: '#23ade5', //播放器主题颜色，目前用于 进度条 和 高亮元素 上
volume: 0.7, //播放器的默认音量
autoplay: true, //是否自动播放 假如希望默认进入页面就能自动播放视频，muted 必需为 true
autoMini: false, //当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
fullscreen: true, //设置和获取播放器窗口全屏
fullscreenWeb: true, //设置和获取播放器网页全屏
setting: true,
pip: true, //开启画中画
playbackRate: true, //是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
flip: true, //是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单
aspectRatio: true, //比例
//miniProgressBar: true, //迷你进度条，只在播放器失去焦点后且正在播放时出现
screenshot: true, //截图
autoPlayback: true, //自动回放
//自定义图标
icons: {
state: document.querySelector('#play'),
},
//重写宽屏模式
controls: [
{
name: 'wide-screen',
position: 'right',
html: '<span class="iconfont icon-wide-screen"></span>',
tooltip: '宽屏模式',
style: {
color: '#fff',
display: 'flex',
},
click: function (...args) {
changeWideScreen()
},
},
{
name: 'narrow-screen',
position: 'right',
html: '<span class="iconfont icon-narrow-screen"></span>',
tooltip: '退出宽屏',
style: {
color: '#fff',
display: 'none',
},
click: function (...args) {
changeWideScreen()
},
},
],
});
}
onMounted(() => {
nextTick(() => {
initPlayer()
})
})
</script>
<style lang="scss" scoped>
.artplayer-app {
width: 100%;
height: 600px;
width: 100%;
:deep(.art-video-player.art-mask-show .art-state) {
//播放按钮
position: absolute;
right: 40px;
bottom: 50px;
.art-icon-state {
width: 60px;
height: 60px;
img {
width: 100%;
}
}
}
//改变播放器的右侧操作按钮
:deep(.art-controls-right) {
position: relative;
display: block;
width: 280px;
.art-control {
position: absolute;
}
//截屏
.art-control-screenshot {
left: 0px;
}
//设置按钮
.art-control-setting {
left: 46px;
}
//画中画
.art-control-pip {
left: 92px;
}
//宽屏
.art-control-wide-screen,
.art-control-narrow-screen {
left: 138px;
.iconfont {
font-size: 20px;
}
}
//网页全屏按钮
.art-control-fullscreenWeb {
left: 184px;
}
//全屏按钮
.art-control-fullscreen {
left: 230px;
}
}
}
</style>
这样就能实现一个简单的视频播放了
渝公网安备 50010802005103号
