hookehuyr

feat(视频播放器): 添加 iOS 原生播放器强制开关选项

允许通过 useNativeOnIos 属性控制 iOS 环境下是否强制使用原生播放器
默认保持原生播放器行为,但可在需要时切换为 Video.js
...@@ -67,6 +67,14 @@ const props = defineProps({ ...@@ -67,6 +67,14 @@ const props = defineProps({
67 required: false, 67 required: false,
68 default: true, 68 default: true,
69 }, 69 },
70 + /**
71 + * iOS 环境下是否强制使用原生播放器
72 + * 默认为 true (使用原生),设为 false 则尝试使用 Video.js
73 + */
74 + useNativeOnIos: {
75 + type: Boolean,
76 + default: true
77 + }
70 }); 78 });
71 79
72 const emit = defineEmits(["onPlay", "onPause"]); 80 const emit = defineEmits(["onPlay", "onPause"]);
......
...@@ -41,7 +41,11 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) { ...@@ -41,7 +41,11 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
41 41
42 // 1. 环境判断与播放器选择 42 // 1. 环境判断与播放器选择
43 const useNativePlayer = computed(() => { 43 const useNativePlayer = computed(() => {
44 - // iOS 微信环境下强制使用原生播放器,因为 video.js 在此环境有兼容性问题 44 + // 如果 props 强制关闭原生播放器,则返回 false (使用 Video.js)
45 + if (props.useNativeOnIos === false) {
46 + return false;
47 + }
48 + // 默认逻辑:iOS 微信环境下使用原生播放器
45 return wxInfo().isIOSWeChat; 49 return wxInfo().isIOSWeChat;
46 }); 50 });
47 51
......
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
25 <VideoPlayer v-if="isPlaying" ref="videoPlayerRef" 25 <VideoPlayer v-if="isPlaying" ref="videoPlayerRef"
26 :video-url="courseFile?.list?.length ? courseFile['list'][0]['url'] : ''" :autoplay="false" 26 :video-url="courseFile?.list?.length ? courseFile['list'][0]['url'] : ''" :autoplay="false"
27 :video-id="courseFile?.list?.length ? courseFile['list'][0]['meta_id'] : ''" 27 :video-id="courseFile?.list?.length ? courseFile['list'][0]['meta_id'] : ''"
28 + :use-native-on-ios="false"
28 @onPlay="handleVideoPlay" @onPause="handleVideoPause" /> 29 @onPlay="handleVideoPlay" @onPause="handleVideoPause" />
29 </div> 30 </div>
30 <div v-if="course.course_type === 'audio'" class="w-full relative border-b border-gray-200"> 31 <div v-if="course.course_type === 'audio'" class="w-full relative border-b border-gray-200">
...@@ -220,7 +221,7 @@ ...@@ -220,7 +221,7 @@
220 </div> 221 </div>
221 <!-- 视频播放器 --> 222 <!-- 视频播放器 -->
222 <VideoPlayer v-show="isPopupVideoPlaying" ref="popupVideoPlayerRef" :video-url="videoUrl" 223 <VideoPlayer v-show="isPopupVideoPlaying" ref="popupVideoPlayerRef" :video-url="videoUrl"
223 - :video-id="videoTitle" :autoplay="false" class="w-full h-full" @play="handlePopupVideoPlay" 224 + :video-id="videoTitle" :autoplay="false" :use-native-on-ios="false" class="w-full h-full" @play="handlePopupVideoPlay"
224 @pause="handlePopupVideoPause" /> 225 @pause="handlePopupVideoPause" />
225 </div> 226 </div>
226 </div> 227 </div>
......