Метеор Safari Видео не будет отображать - PullRequest
Новая
       26

Метеор Safari Видео не будет отображать

0 голосов
/ 28 января 2020

Я не уверен, что это всегда было проблемой, но простые видео html5 просто не будут отображаться для меня в Safari. И для мобильных, и для настольных компьютеров.

Я зашел так далеко, что установил Meteor fre sh, добавил локальный файл mp4 и файл webm, и даже попробовал известный рабочий видеофайл отсюда: https://www.w3schools.com/html/html5_video.asp

Я использовал идентичный html5 видеокод из других платформ и stati c html (все, что работает на этих платформах), но, увы, они тоже не работают.

Нет ошибок (консоль или терминал), а все остальное работает / загружается нормально.

Сделайте попытку. Добавьте новую установку метеора и добавьте следующее html5 видео: 

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

Любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 29 января 2020

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>
...