Safari предотвращает автоматическое воспроизведение видео.js плеера - PullRequest
Новая
       18

Safari предотвращает автоматическое воспроизведение видео.js плеера

0 голосов
/ 10 января 2019

На моем сайте есть vue-video-player, который использует библиотеку video.js. На мобильном устройстве Chrome на Samsung Galaxy S9 он воспроизводится автоматически, но на мобильном сафари на iphone 7 он не воспроизводится автоматически.

HTML это: 

<video-player  class="video-player-box"
               id="player"
               ref="videoPlayer"
               :options="playerOptions"
               @ended="onPlayerEnded($event)">
</video-player>

и в моем теге сценария: 

data() {
    return {
        playerOptions: {
            muted: true,
            autoplay: true,
            controls: false,
            sources: [{
                type: "video/mp4",
                src: "https://res.cloudinary.com/dlqvkenro/video/upload/v1544320787/gvnn.mp4"
            }],
            poster: "/static/images/author.jpg",
        }
    }
},

На самом деле в сафари, когда я нажимаю значок звука, видео начинает воспроизводиться, но я хочу, чтобы оно запускалось автоматически при входе пользователя на страницу.

Я добавил код для программного запуска плеера: 

mounted() {
    this.player.play()
        .then(() => {
            console.log('play succseed');
        })
        .catch(() => {
            alert('safari prevent player');
        });
},

и собственно в сафари появляется предупреждение. Могу ли я сделать что-нибудь, чтобы победить яблоко?

Демо

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

У меня была похожая проблема только с использованием тега <video> в моем компоненте vue. Я был в состоянии заставить это автоматически играть, но должен был перезагрузить HTML, чтобы это работало. Возможно, есть что-то, что вы можете использовать ниже ... 

<template>
<div class="video-wrapper">
    <video class="video" playsinline muted autoplay loop>
        <source src="loopedVideo.mp4" type='video/mp4'>
    </video>
</div>
</template>
<script>
export default {
name: 'Video',
mounted() {
    // Start looped video.
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let video = document.querySelector('.video');
    if (isSafari && video) {
        setTimeout(function() {
            // werid fix for safari
            document.querySelector('.video-wrapper').innerHTML = video.outerHTML;
        }, 100);
    }
}
}
</script>
0 голосов
/ 10 января 2019

посмотрите на это здесь https://blog.videojs.com/autoplay-best-practices-with-video-js/

Надеюсь, это поможет.

...