【问题标题】:Meteor Safari Video Wont DisplayMeteor Safari 视频不显示
【发布时间】:2020-01-29 06:05:26
【问题描述】:

我不确定这是否一直是个问题,但简单的 html5 视频根本不会在 Safari 中显示给我。移动设备和桌面设备。

我已经安装了 Meteor 新鲜,并添加了本地 mp4 文件和 webm 文件,甚至从这里尝试了一个已知的工作视频文件:https://www.w3schools.com/html/html5_video.asp

我使用了来自其他框架的相同 html5 视频代码和静态 html(所有这些都可以在这些平台上运行),但可惜它们也不起作用。

没有错误可言(控制台或终端),其他一切正常/加载。

试一试。添加新的流星安装并添加以下 html5 视频:

<video playsinline autoplay muted loop> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video>

任何帮助将不胜感激!

【问题讨论】:

    标签: javascript meteor meteor-blaze


    【解决方案1】:

    Safari 似乎无法在没有控件的情况下渲染视频。我能够通过手动创建视频元素来使其工作(次优)

    Template.video.onRendered(function () {
      const instance = this
      const parent = instance.find('#video-parent')
      instance.video = document.createElement('video')
      instance.video.classList.add('rounded-lg')
      instance.video.classList.add('img-fluid')
      instance.video.src = instance.data.src ? instance.data.src : ''
      instance.video.addEventListener('canplaythrough', () => {
        console.log(instance.video)
        instance.video.controls = true
        //Meteor.setTimeout(()=>{
        //  instance.video.play()
        //}, 500)
      })
      parent.append(instance.video)
    })
    Template.video.onDestroyed(function () {
      const instance = this
      instance.video.pause()
      instance.video.remove()
    })
    

    <template name="video">
     <div id="video-parent"></div>
    </template>
    
    <template name+"something">
     {{>video src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"}}
    </template>
    

    【讨论】:

    • 这太棒了!感谢您为此付出的所有辛勤工作。根据我们通过 Meteor 论坛进行的其他讨论,我更新了使用 .load() 的答案,因为我希望它能够“在线播放”,所以我也将它添加到了这里,供任何需要该功能的人使用。哈哈 感觉 Safari 最近变成了 IE 哈哈
    猜你喜欢
    • 2014-04-27
    • 2021-05-25
    • 1970-01-01
    • 2017-09-29
    • 2013-06-27
    • 1970-01-01
    • 2022-08-03
    • 1970-01-01
    • 2015-05-23
    相关资源
    最近更新 更多