Video Player组件无法在手机端播放
Jeremiah_Zhang
2021.07.21 16:19发布于技术 - 新手入门
1.41k6

大家好,我想问一下关于在使用Video Player组件中遇到的技术问题。在电脑端网页中,Video Player可以成功播放视频。然而在手机或平板电脑页面中,组件无法播放。组件页面显示“The video failed to load:(”。请问是由什么原因导致的,以及怎么解决?谢谢!

首赞
收藏
手机查看
举报
6个回复
倒序看帖
仅看楼主
楼层直达
    西蒙子大胡子
    2021.07.21 17:20 发布
    #1

    服务端或客户端有错误信息吗? 没有详细错误信息很难判断

    首赞
    回复
    举报
    颂文Gavin
    2021.07.22 00:00 发布
    #2

    可能和是否手机/平板无关,和不同浏览器(特别是较新版本的Chrome/Edge浏览器)在不同设备上的安全策略有关,您可以试试把mp4文件放在https的服务器上试试:

    我试着做了一个非常简单的页面用了Video Player,并发布应用(测试视频地址用Dynamic方式,具体地址是http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4)

    结果如下:

    1.连家里的电信宽带情况下:

    • Windows10 下的 Chrome 和 Edge → 失败;
    • MacOS Big Sur 11.4 下的 Safari  → 成功;Chrome → 失败;
    • Mac 上的 Parallel Win10 虚拟机下的 Chrome 和 Edge → 失败;
    • Mac 上的 Parallel Ubuntu 20.04 虚拟机下的 Firefox → 失败;
    • iPad iOS14.3 下的 Safari 和 Chrome(古老版本的Chrome) → 成功;
    • 两台iPhone 分别为 iOS14.6 和 iOS14.0.1 下的 Safari → 成功。

     

    2.分别使用联通和移动情况下:

    • 两台iPhone 分别为 iOS14.6 和 iOS14.0.1 下的 Safari → 成功。

     

    很有意思的是,在我的测试中,所有苹果Safari浏览器都是顺利打开视频的,而所有基于Chromium的浏览器(Chrome and Edge,除了我的iPad上面的古早版本Chrome)都是“The video failed to load :(”。

    试着Inspect看了下,一个有价值的信息可以看看以下对比:

    //失败的情况
    Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
    index.html:1 
    Mixed Content: The page at 'https://XXXXXXXX-sandbox.mxapps.io/index.html?profile=Responsive' was loaded over HTTPS, but requested an insecure element 'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
    190204084208765161.mp4:1 
    GET https://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4 403

     

    //成功的情况
    The page at https://XXXXXXXX-sandbox.mxapps.io/index.html?profile=Responsive was allowed to display insecure content from http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4.

     

    所以我换了一个https的mp4地址:https://www.cdc.gov/coronavirus/2019-ncov/videos/psa-simone/tnq1000-testimony-simone-30-side_effects-en-v01_lowres.mp4

    然后,之前不行的也行了。

     

    Jeremiah_Zhang、shenyinabcd
    点赞
    回复
    举报
    Jeremiah_Zhang
    回复
    颂文Gavin
    2021.07.22 10:03 发布
    楼主

    好的,谢谢您的回复!我看了一下可能就是因为链接格式的问题。我还有一个小问题不知道您能不能解答一下:video player会自带download功能,想知道这个功能能不能禁用掉呢?谢谢!

    首赞
    回复
    举报
    颂文Gavin
    回复
    Jeremiah_Zhang
    2021.07.22 18:41 发布

    谢谢。

    对于download功能,是因为chrome上的HTML5播放器本身自带了这个东西(在safari上就不会出现下载按钮)。我想到的方法是,基于Mendix在GitHub上的video player widget的源码修改再生成组件。

    源码地址:https://github.com/mendix/video-player/blob/master/src/VideoPlayer.tsx

    修改点参考:在渲染的render函数适当位置加上:

    controls controlsList="nodownload"

    今天太忙了,改天试试再回复您。

    首赞
    回复
    举报
    颂文Gavin
    2021.07.22 01:39 发布
    #3

    做了个Sample(以下为Edge和Safari的对比):

    WX20210722-013606@2x.png

    WX20210722-013710@2x.png

    手机上效果这样:

    WechatIMG94.jpeg

    收费的阳光
    点赞
    回复
    举报
    大马小桃
    回复
    颂文Gavin
    2023.05.29 15:32 发布

    sample 文件可以分享一下么?  看下url是怎么写的  

    大马小桃
    点赞
    回复
    举报
用户头像
Jeremiah_Zhang
主题
1
回复
1
最新发布