关于H5自动播放被禁止的问题
通过增加触摸和点击的方法,来运行音乐的播放,再而移除对应的绑定方法。
<template>
<div>
<audio :src="mp3" preload ref="music" :controls="false" style="position: absolute; z-index: -1" />
</div>
</template>
<script>
import { Vue, Component, Ref } from 'vue-property-decorator';
@Component
export default class MyAudio extends Vue {
mp3 = require('music.mp3');
@Ref('music') music;
mounted() {
document.addEventListener('touchend', this.startMusic);
document.removeEventListener('click', this.startMusic);
}
startMusic() {
this.$nextTick(() => {
this.music.play();
this.music.pause();
document.removeEventListener('touchend', this.startMusic);
document.removeEventListener('click', this.startMusic);
});
}
}
</script>
最后更新于
这有帮助吗?