On my site I have vue-video-player which use video.js library. On mobile chrome at samsung galaxy s9 it autoplay correctly but it doesn't autoplay on mobile safari at iphone 7.
HTML is:
<video-player class="video-player-box"
id="player"
ref="videoPlayer"
:options="playerOptions"
@ended="onPlayerEnded($event)">
</video-player>
and in my script tag:
data() {
return {
playerOptions: {
muted: true,
autoplay: true,
controls: false,
sources: [{
type: "video/mp4",
src: ".mp4"
}],
poster: "/static/images/author.jpg",
}
}
},
Actually on safari when I click sound icon video start playing but I want it to start automatically when user enter page.
I added code to programically start player:
mounted() {
this.player.play()
.then(() => {
console.log('play succseed');
})
.catch(() => {
alert('safari prevent player');
});
},
and actually in safari alert appears. Is there anyting I can do to win against apple?
Demo
On my site I have vue-video-player which use video.js library. On mobile chrome at samsung galaxy s9 it autoplay correctly but it doesn't autoplay on mobile safari at iphone 7.
HTML is:
<video-player class="video-player-box"
id="player"
ref="videoPlayer"
:options="playerOptions"
@ended="onPlayerEnded($event)">
</video-player>
and in my script tag:
data() {
return {
playerOptions: {
muted: true,
autoplay: true,
controls: false,
sources: [{
type: "video/mp4",
src: "https://res.cloudinary./dlqvkenro/video/upload/v1544320787/gvnn.mp4"
}],
poster: "/static/images/author.jpg",
}
}
},
Actually on safari when I click sound icon video start playing but I want it to start automatically when user enter page.
I added code to programically start player:
mounted() {
this.player.play()
.then(() => {
console.log('play succseed');
})
.catch(() => {
alert('safari prevent player');
});
},
and actually in safari alert appears. Is there anyting I can do to win against apple?
Demo
Share Improve this question edited Jan 10, 2019 at 7:21 BT101 asked Jan 10, 2019 at 6:29 BT101BT101 3,84611 gold badges48 silver badges101 bronze badges2 Answers
Reset to default 5take a look at this here https://blog.videojs./autoplay-best-practices-with-video-js/
I hop it help.
I had a similar problem with just using a <video> tag in my vue ponent. I was able to get it to auto play but had to reload the html for it to work. Perhaps there is something you can use below...
<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>