forked from integrated_whb/integrated_whb_vue
视频播放增加去掉倍速和进度条
parent
2efc75601a
commit
a6a2fbc88b
|
@ -43,6 +43,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
showProgress: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
playTime: {
|
playTime: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
|
@ -77,6 +81,34 @@ onMounted(() => {
|
||||||
const fnCreateAliPlayer = async () => {
|
const fnCreateAliPlayer = async () => {
|
||||||
await nextTick();
|
await nextTick();
|
||||||
fnDisposeAliPlayer();
|
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(
|
player = new window.Aliplayer(
|
||||||
{
|
{
|
||||||
id: "J_prismPlayer",
|
id: "J_prismPlayer",
|
||||||
|
@ -99,6 +131,7 @@ const fnCreateAliPlayer = async () => {
|
||||||
height: props.height,
|
height: props.height,
|
||||||
autoplay: props.autoplay,
|
autoplay: props.autoplay,
|
||||||
useH5Prism: true,
|
useH5Prism: true,
|
||||||
|
skinLayout,
|
||||||
},
|
},
|
||||||
(player) => {
|
(player) => {
|
||||||
props.autoplay && player.play();
|
props.autoplay && player.play();
|
||||||
|
@ -139,4 +172,12 @@ defineExpose({
|
||||||
width: v-bind(width);
|
width: v-bind(width);
|
||||||
height: v-bind(height);
|
height: v-bind(height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep {
|
||||||
|
.prism-setting-speed,
|
||||||
|
.prism-setting-cc,
|
||||||
|
.prism-setting-audio {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
:vid="vid"
|
:vid="vid"
|
||||||
:play-auth="playAuth"
|
:play-auth="playAuth"
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
|
:cover="cover"
|
||||||
|
:autoplay="autoplay"
|
||||||
|
:show-progress="showProgress"
|
||||||
|
:play-time="playTime"
|
||||||
/>
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
@ -41,6 +45,22 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
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 emits = defineEmits(["update:visible"]);
|
||||||
const visible = useVModel(props, "visible", emits);
|
const visible = useVModel(props, "visible", emits);
|
||||||
|
|
Loading…
Reference in New Issue