feat(视频播放器): 添加 iOS 原生播放器强制开关选项
允许通过 useNativeOnIos 属性控制 iOS 环境下是否强制使用原生播放器 默认保持原生播放器行为,但可在需要时切换为 Video.js
Showing
3 changed files
with
15 additions
and
2 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment