feat: update
This commit is contained in:
Rogee
Binary file not shown.
@@ -21,7 +21,9 @@
|
||||
"vue-icons-plus": "^0.1.8",
|
||||
"vue-router": "^4.5.0",
|
||||
"wechat-js-sdk": "^1.3.3",
|
||||
"weixin-js-sdk": "^1.6.5"
|
||||
"weixin-js-sdk": "^1.6.5",
|
||||
"xgplayer": "^3.0.22",
|
||||
"xgplayer-mp4": "^3.0.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.2",
|
||||
|
||||
@@ -40,12 +40,12 @@ export function useWxSDK() {
|
||||
title: shareInfo.title, // 分享标题
|
||||
link: shareInfo.link, // 分享链接，可以不是当前页面，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
||||
imgUrl: shareInfo.imgUrl,
|
||||
success: function () {
|
||||
success: function (e) {
|
||||
console.log("分享朋友圈成功", e);
|
||||
// 用户确认分享后执行的回调函数
|
||||
onSuccess();
|
||||
},
|
||||
cancel: function () {
|
||||
cancel: function (e) {
|
||||
console.log("分享朋友圈取消", e);
|
||||
onCancel();
|
||||
// 用户取消分享后执行的回调函数
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script setup>
|
||||
import Plyr from "plyr";
|
||||
import "plyr/dist/plyr.css";
|
||||
import Player, { Events, I18N } from 'xgplayer';
|
||||
import Mp4Plugin from "xgplayer-mp4";
|
||||
import 'xgplayer/dist/index.min.css';
|
||||
import ZH from 'xgplayer/es/lang/zh-cn';
|
||||
import MobilePreset from 'xgplayer/es/presets/mobile';
|
||||
|
||||
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { BsChevronLeft } from "vue-icons-plus/bs";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
@@ -18,44 +23,116 @@ const videoElement = ref(null);
|
||||
|
||||
const mediaLoaded = ref(false);
|
||||
|
||||
const initializePlayer = () => {
|
||||
if (videoElement.value) {
|
||||
player.value = new Plyr(videoElement.value, {
|
||||
controls: [
|
||||
"play",
|
||||
"progress",
|
||||
"current-time",
|
||||
"duration",
|
||||
"settings",
|
||||
"fullscreen",
|
||||
],
|
||||
settings: ["speed"],
|
||||
speed: { selected: 1, options: [0.5, 0.75, 1] },
|
||||
autoplay: false,
|
||||
// 启用中文
|
||||
I18N.use(ZH)
|
||||
|
||||
|
||||
const initializePlayer = async () => {
|
||||
if (!videoElement.value) {
|
||||
console.error("Video element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await postApi.play(route.params.id);
|
||||
|
||||
player.value = new Player({
|
||||
// id: 'player',
|
||||
el: videoElement.value,
|
||||
url: data.url,
|
||||
// height: '100%',
|
||||
width: '100%',
|
||||
// marginControls: true,
|
||||
fitVideoSize: 'fixWidth',
|
||||
fluid: true,
|
||||
plugins: [Mp4Plugin],
|
||||
presets: [MobilePreset],
|
||||
playsinline: true,
|
||||
playbackRate: [0.5, 0.75, 1],
|
||||
autoplay: true,
|
||||
videoFillMode: 'contain',
|
||||
mp4plugin: {
|
||||
maxBufferLength: 15,
|
||||
minBufferLength: 5,
|
||||
// reqOptions: {
|
||||
// mode: 'cors',
|
||||
// method: 'POST',
|
||||
// headers: { // 需要带的自定义请求头
|
||||
// 'x-test-header': 'rrrr'
|
||||
// },
|
||||
// }
|
||||
// ... 其他配置
|
||||
},
|
||||
|
||||
// 'x5-video-player-type': 'h5',
|
||||
// 'x5-video-player-fullscreen': false,
|
||||
|
||||
poster: article.value.head_images[0],
|
||||
});
|
||||
|
||||
player.value.on("play", async () => {
|
||||
player.value.on(Events.READY, async () => {
|
||||
await loadVideoSource();
|
||||
})
|
||||
|
||||
player.value.on(Events.PLAY, async () => {
|
||||
if (!mediaLoaded.value) {
|
||||
await loadVideoSource();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
player.value.on("ended", () => {
|
||||
player.value.on(Events.ENDED, () => {
|
||||
mediaLoaded.value = false;
|
||||
});
|
||||
|
||||
player.value.on(Events.ERROR, (error) => {
|
||||
alert(`Player失败: ${error.errorCode} ${error.message} mediaError: ${error.mediaError?.code} ${error.mediaError?.message}`);
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Failed to load video:", error);
|
||||
alert("视频加载失败: " + error.response.data);
|
||||
}
|
||||
|
||||
// if (videoElement.value) {
|
||||
// player.value = new Plyr(videoElement.value, {
|
||||
// controls: [
|
||||
// "play",
|
||||
// "progress",
|
||||
// "current-time",
|
||||
// "duration",
|
||||
// "settings",
|
||||
// "fullscreen",
|
||||
// ],
|
||||
// settings: ["speed"],
|
||||
// speed: { selected: 1, options: [0.5, 0.75, 1] },
|
||||
// autoplay: false,
|
||||
// });
|
||||
|
||||
// player.value.on("play", async () => {
|
||||
// if (!mediaLoaded.value) {
|
||||
// await loadVideoSource();
|
||||
// }
|
||||
// });
|
||||
|
||||
// player.value.on("ended", () => {
|
||||
// mediaLoaded.value = false;
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const loadVideoSource = async () => {
|
||||
try {
|
||||
const { data } = await postApi.play(route.params.id);
|
||||
if (videoElement.value) {
|
||||
mediaLoaded.value = true;
|
||||
mediaLoaded.value = true;
|
||||
player.value.src = data.url;
|
||||
|
||||
videoElement.value.src = data.url;
|
||||
await player.value.restart();
|
||||
await player.value.play();
|
||||
}
|
||||
|
||||
// if (videoElement.value) {
|
||||
// mediaLoaded.value = true;
|
||||
|
||||
// videoElement.value.src = data.url;
|
||||
// await player.value.restart();
|
||||
// await player.value.play();
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error("Failed to load video:", error);
|
||||
alert("视频加载失败: " + error.response.data);
|
||||
@@ -80,7 +157,7 @@ const handleBuy = async () => {
|
||||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||||
// 支付成功，刷新文章数据
|
||||
fetchArticle();
|
||||
loadVideoSource();
|
||||
//TODO: reload media loadVideoSource();
|
||||
} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
|
||||
// 用户取消支付
|
||||
console.log("Payment cancelled");
|
||||
@@ -111,6 +188,7 @@ const fetchArticle = async () => {
|
||||
const { data } = await postApi.show(id);
|
||||
article.value = data;
|
||||
|
||||
|
||||
// 调用微信 JS SDK 分享接口
|
||||
wx.setShareInfo({
|
||||
title: article.value.title,
|
||||
@@ -178,11 +256,12 @@ onUnmounted(() => {
|
||||
|
||||
<div class="flex-1">
|
||||
<div v-if="article">
|
||||
<video webkit-playsinline playsinline ref="videoElement" :poster="article.head_images[0]"
|
||||
<!-- <video webkit-playsinline playsinline ref="videoElement" :poster="article.head_images[0]"
|
||||
class="w-full aspect-video object-cover plyr-video" preload="none">
|
||||
<source type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</video> -->
|
||||
<div ref="videoElement" id="player"></div>
|
||||
|
||||
<div v-if="article && !article.bought" class="bg-white border-b border-gray-200">
|
||||
<div class="text-sm bg-orange-500 text-white px-4 py-2">
|
||||
|
||||
@@ -16,9 +16,10 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
allowedHosts: ['mp.jdwan.com'],
|
||||
port: 3001,
|
||||
open: true,
|
||||
allowedHosts: [".jdwan.com", "0.0.0.0", "127.0.0.1", "localhost", "10.1.1.108"],
|
||||
proxy: {
|
||||
'/v1': 'http://localhost:8088',
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user