When using Chrome on Android, playing music or video is restricted if there are no user movements detected. I came across some code from Google that utilizes the addEventListener method to detect user interactions and enable the playback of music or video.
Interestingly, I noticed that in Chrome on Android, utilizing the @click attribute prevents tracks from playing. After much debugging and research, I discovered that while Chrome begins playing the track momentarily, it quickly stops. This behavior seems to be due to Chrome interpreting @click as an auto-play feature that might display advertisements, rather than recognizing it as a valid user interaction trigger. By switching to the use of addEventListener, Chrome successfully plays the media without any issues. While this solution works for me, there are still two challenges:
1) I need a way to pass the trackObj from the template to the event listener's function;
2) If there are hundreds of tracks, I am unsure if adding listeners to each one is feasible.
<template>
<div v-for="(trackObj, index) in tagObj.tracks" :key="trackObj.trackId">
// What currently functions on PC but not on Android with Chrome
<b-card @click="nextTrack({whatToDo: 'playTrackObj', trackObj: trackObj})"
class="dragula-move w-100 pl-2" no-body>
{{ index + 1 }}. {{ trackObj.trackTitle }}
</b-card>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions('header', [
'nextTrack'
])
},
// Solution for Android with Chrome
mounted () {
// let self = this
// let allTracks = document.getElementsByClassName('card dragula-move w-100 pl-2')
// for (let i = 0; i < allTracks.length; i++) {
// allTracks[i].addEventListener('click', function (event) {
// self.nextTrack({whatToDo: 'playDefaultTrack'})
// })
// }
}
}
</script>
If I remove the @click="nextTrack(...) attribute from the <b-card> element and uncomment the code in the mounted() function, Chrome on Android successfully detects user interactions and initiates track playback.
I am curious if there is a way to assist Chrome on Android in acknowledging user clicks while still utilizing my current code (i.e., @click="nextTrack(...)), or if someone can provide guidance on how to pass a trackObj from the template to an EventListener that can then be utilized by the self.nextTrack(...) function?
The use of @click.native does not resolve this issue.