I am trying to change the src attribute of an HTML < video > element and play it after 10 seconds of playing the first video, in desktop it works fine, however, in mobile devices it gets stuck after changing the source and it never plays.
I am using plyr.js, however the same happens without it.
document.addEventListener('DOMContentLoaded', () => {
const player = new Plyr('#player', {
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
});
player.on('ready', event => {
player.play();
});
player.on('timeupdate', event => {
console.log(player.currentTime);
if (player.currentTime > 10) {
player.source = {
type: 'video',
sources: [
{
src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
type: 'video/mp4',
size: 720,
}
]
}
}
});
});
I am aware of webkit policies however, they don't specify that after changing the source the video need user interaction again to be played, it doesn't make sense to me.
https://codepen.io/andreupifarre/full/qJYeJL/
Is this part of the policy? Am I doing something wrong? Can this be done?
