YouTube Style Autoplay Mute (Chrome UX Solution) - VueJS

videoPlayer.vue

// Semi-pseudo code below

<template>
<video :muted="muted"></video>
</template>

<script>
export default {
    data: function() {
        return {
            muted: false
        }
    },
    methods: {
        playVideo: function() {
            let self = this
            play = $(domelement).play() // Using jQuery for 
            if ( play !== undefined ) {
                play.then( function() {
                    // Code can go here that runs when the video is definitively playing.
                })
                .catch( function(error) {
                    if ( error.message.startsWith("play() failed because the user didn't interact with the document first.")
                        || error.message.startsWith("The operation was aborted.") ) {
                        self.muted = true
                        self.$nextTick(function() {
                            play = domelement.play()
                            if ( play !== undefined ) {
                                play.then( function() {
                                    // Code can go here that runs when the video is definitively playing.
                                })
                                .catch( function(error) {
                                    // Something went terribly wrong
                                })
                            }
                        })
                    } else {
                        // Something went kind of wrong
                    }
                })
            }
        }
    },
    mounted() {
        this.playVideo()
    }
}
</script>

<style scoped>

</style>

Added support for safari - there should really be a standard error message or title so you can reliably handle.