refactor(VideoPlayer): 优化非PC端视频播放控制逻辑
在非PC端且非微信PC端环境下,添加视频播放和暂停的事件监听,以隐藏控制条并阻止默认行为。同时,更新了wxInfo工具函数,增加isWeiXinDesktop字段以区分微信PC端。
Showing
3 changed files
with
15 additions
and
6 deletions
| ... | @@ -28,7 +28,6 @@ declare module 'vue' { | ... | @@ -28,7 +28,6 @@ declare module 'vue' { |
| 28 | VanButton: typeof import('vant/es')['Button'] | 28 | VanButton: typeof import('vant/es')['Button'] |
| 29 | VanCellGroup: typeof import('vant/es')['CellGroup'] | 29 | VanCellGroup: typeof import('vant/es')['CellGroup'] |
| 30 | VanCheckbox: typeof import('vant/es')['Checkbox'] | 30 | VanCheckbox: typeof import('vant/es')['Checkbox'] |
| 31 | - VanCol: typeof import('vant/es')['Col'] | ||
| 32 | VanDatePicker: typeof import('vant/es')['DatePicker'] | 31 | VanDatePicker: typeof import('vant/es')['DatePicker'] |
| 33 | VanField: typeof import('vant/es')['Field'] | 32 | VanField: typeof import('vant/es')['Field'] |
| 34 | VanForm: typeof import('vant/es')['Form'] | 33 | VanForm: typeof import('vant/es')['Form'] |
| ... | @@ -40,7 +39,6 @@ declare module 'vue' { | ... | @@ -40,7 +39,6 @@ declare module 'vue' { |
| 40 | VanPopup: typeof import('vant/es')['Popup'] | 39 | VanPopup: typeof import('vant/es')['Popup'] |
| 41 | VanProgress: typeof import('vant/es')['Progress'] | 40 | VanProgress: typeof import('vant/es')['Progress'] |
| 42 | VanRate: typeof import('vant/es')['Rate'] | 41 | VanRate: typeof import('vant/es')['Rate'] |
| 43 | - VanRow: typeof import('vant/es')['Row'] | ||
| 44 | VanTab: typeof import('vant/es')['Tab'] | 42 | VanTab: typeof import('vant/es')['Tab'] |
| 45 | VanTabs: typeof import('vant/es')['Tabs'] | 43 | VanTabs: typeof import('vant/es')['Tabs'] |
| 46 | VanToast: typeof import('vant/es')['Toast'] | 44 | VanToast: typeof import('vant/es')['Toast'] | ... | ... |
| ... | @@ -77,7 +77,16 @@ const handleMounted = (payload) => { | ... | @@ -77,7 +77,16 @@ const handleMounted = (payload) => { |
| 77 | if (props.autoplay) { | 77 | if (props.autoplay) { |
| 78 | player.value.play(); | 78 | player.value.play(); |
| 79 | } | 79 | } |
| 80 | - if (!wxInfo().isPc) { | 80 | + |
| 81 | + if (!wxInfo().isPc && !wxInfo().isWeiXinDesktop) { // 非PC端,且非微信PC端 | ||
| 82 | + // 监听视频播放状态 | ||
| 83 | + player.value.on('play', () => { | ||
| 84 | + // 播放时隐藏controls | ||
| 85 | + player.value.controlBar.hide(); | ||
| 86 | + }); | ||
| 87 | + player.value.on('pause', () => { | ||
| 88 | + | ||
| 89 | + }) | ||
| 81 | // 添加touchstart事件监听 | 90 | // 添加touchstart事件监听 |
| 82 | player.value.on('touchstart', (event) => { | 91 | player.value.on('touchstart', (event) => { |
| 83 | // 阻止事件冒泡,避免触发controls的默认行为 | 92 | // 阻止事件冒泡,避免触发controls的默认行为 | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2022-04-18 15:59:42 | 2 | * @Date: 2022-04-18 15:59:42 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2023-02-24 16:13:06 | 4 | + * @LastEditTime: 2025-03-25 17:03:47 |
| 5 | - * @FilePath: /data-table/src/utils/tools.js | 5 | + * @FilePath: /mlaj/src/utils/tools.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | import dayjs from 'dayjs'; | 8 | import dayjs from 'dayjs'; |
| ... | @@ -24,6 +24,7 @@ const wxInfo = () => { | ... | @@ -24,6 +24,7 @@ const wxInfo = () => { |
| 24 | let isIpad = u.indexOf('iPad') > -1; // iPad平台 | 24 | let isIpad = u.indexOf('iPad') > -1; // iPad平台 |
| 25 | let uAgent = navigator.userAgent.toLowerCase(); | 25 | let uAgent = navigator.userAgent.toLowerCase(); |
| 26 | let isWeiXin = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false; | 26 | let isWeiXin = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false; |
| 27 | + let isWeiXinDesktop = isWeiXin && uAgent.indexOf('wechat') > -1 ? true : false; | ||
| 27 | let isPC = (uAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i)) ? false : true; | 28 | let isPC = (uAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|micromessenger)/i)) ? false : true; |
| 28 | return { | 29 | return { |
| 29 | isAndroid, | 30 | isAndroid, |
| ... | @@ -31,7 +32,8 @@ const wxInfo = () => { | ... | @@ -31,7 +32,8 @@ const wxInfo = () => { |
| 31 | isWeiXin, | 32 | isWeiXin, |
| 32 | isMobile, | 33 | isMobile, |
| 33 | isIpad, | 34 | isIpad, |
| 34 | - isPC | 35 | + isPC, |
| 36 | + isWeiXinDesktop | ||
| 35 | }; | 37 | }; |
| 36 | }; | 38 | }; |
| 37 | 39 | ... | ... |
-
Please register or login to post a comment