视频播放增加去掉倍速和进度条

dev
LiuJiaNan 2024-03-15 09:23:39 +08:00
parent 2efc75601a
commit a6a2fbc88b
2 changed files with 61 additions and 0 deletions

View File

@ -43,6 +43,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
showProgress: {
type: Boolean,
default: true,
},
playTime: {
type: Number,
default: 0,
@ -77,6 +81,34 @@ onMounted(() => {
const fnCreateAliPlayer = async () => {
await nextTick();
fnDisposeAliPlayer();
const skinLayout = [
{ name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
{ name: "H5Loading", align: "cc" },
{ name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
{ name: "infoDisplay" },
{ name: "tooltip", align: "blabs", x: 0, y: 56 },
{ name: "thumbnail" },
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [
{ name: "playButton", align: "tl", x: 15, y: 12 },
{ name: "timeDisplay", align: "tl", x: 10, y: 7 },
{ name: "fullScreenButton", align: "tr", x: 10, y: 12 },
{ name: "setting", align: "tr", x: 15, y: 12 },
{ name: "volume", align: "tr", x: 5, y: 10 },
],
},
];
props.showProgress &&
skinLayout.at(-1).children.unshift({
name: "progress",
align: "blabs",
x: 0,
y: 44,
});
player = new window.Aliplayer(
{
id: "J_prismPlayer",
@ -99,6 +131,7 @@ const fnCreateAliPlayer = async () => {
height: props.height,
autoplay: props.autoplay,
useH5Prism: true,
skinLayout,
},
(player) => {
props.autoplay && player.play();
@ -139,4 +172,12 @@ defineExpose({
width: v-bind(width);
height: v-bind(height);
}
:deep {
.prism-setting-speed,
.prism-setting-cc,
.prism-setting-audio {
display: none;
}
}
</style>

View File

@ -6,6 +6,10 @@
:vid="vid"
:play-auth="playAuth"
:visible="visible"
:cover="cover"
:autoplay="autoplay"
:show-progress="showProgress"
:play-time="playTime"
/>
</el-dialog>
</template>
@ -41,6 +45,22 @@ const props = defineProps({
type: Boolean,
default: false,
},
cover: {
type: String,
default: "",
},
autoplay: {
type: Boolean,
default: true,
},
showProgress: {
type: Boolean,
default: true,
},
playTime: {
type: Number,
default: 0,
},
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);