首页 > 其他 > 详细

vue 页面 添加背景音乐

时间:2019-11-13 18:23:19      阅读:827      评论:0      收藏:0      [点我收藏+]

 

背景音乐

添加背景音乐 并有单击事件   循环播放

 

<template>
    <div id="page">
        <div style="width: 100%" class="flex-container column">
            <video id="video" src="../static/audios/bgm3.mp3" controls="controls" hidden="hidden" autoplay="autoplay"  loop="loop"> </video>

            <img  id="img" class="play" style="transform: translate(-1584.4%, 121.5%) scale(1)" :src="sound" @click="play()">

        </div>
    </div>
</template>


<script>
 export default {
        data() {
            return {
                sound: require(../static/img/33.png),
        },
         methods: {
            play(){
                let vo = document.getElementById("video")
                if(this.sound == require(../static/img/33.png)){
                    this.sound = require(../static/img/22.png)
                    vo.autoplay = true
                    vo.play()
                }
                else{
                    this.sound = require(../static/img/33.png)
                    vo.pause()
                }

            }
}
</script>

 

目录结构

技术分享图片

 

 

 

 

vue 页面 添加背景音乐

原文:https://www.cnblogs.com/JonaLin/p/11851511.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!