三、视频音频播放

3.1视频播放:

//取到id后利用循环取出url
在循环的模块中写入video标签
<video controls class="video" :src="item.url"></video> //controls为控制，需要加上此属性，否则无法播放
//vue中变量 需要在前加上“:”

3.2音频播放：

三目运算写好图片转换（播放按钮）

<img :src="isPlay?require('../assets/pause.png'):require('../assets/play.png') "
@click="handleImg"> //点击事件获取图片状态
  // require vue中获取静态资源
   <audio
        @play="onPlay"
        @pause="onPause"
        :src="playUrl" controls ref="audio">
   </audio>   /*音频播放标签*/ 
<script>
    export default {
      data() {
        return {
          isPlay:true, //设定isPlay状态选择播放按钮初始的图片
          playUrl:"https://music.163.com/song/media/outer/url?id=35625825" //音频地址Url
        }
      }，
      methods: {
            handleImg(){
                this.isPlay=!this.isPlay
                if(this.isPlay){
                    this.$refs.audio.pause() //音频暂停
                    this.isPlay = true
                }else{
                    this.$refs.audio.play() //音频播放
                    this.isPlay = false
                }
            }, //事件函数，绑定图片状态给播放按钮
            onPlay(){
                this.isPlay = false
            },
            onPause(){
                this.isPlay = true //播放按钮回传状态给图片
            },
            getDom(){
                console.log(this.$refs.music); //获取Dom
            }
        },
        }    
</script>