Vue实现视频播放列表（三）01——解决vue中，使用video.js时，audiovideo标签动态绑定src属性失效，切换src不能播放的问题

Vue实现视频播放列表（三）01——解决vue中，使用video.js时，audio/video标签动态绑定src属性失效，切换src不能播放的问题

video.js官网——https://www.npmjs.com/package/video.js

1、问题描述

页面中使用:src绑定视频时，视频未刷新。

2、分析

不要用原生video去切换,不然video.js的方法一个都监听不到啦

3、切换视频的正确方式

要改video元素的src属性，不是改source元素

4、示例4

1-推荐写法

vue中ref特性——https://cn.vuejs.org/v2/api/#ref

<templae>
	<!-- 给video绑定个ref值 -->
    <video ref='video' controls>
       浏览器支持的video元素
    </video>
    
    <!-- 给audio绑定个ref值 -->
    <audio ref='audio' controls>
    	<source :src="audio_url">
   		您的浏览器不支持 audio 元素。
    </audio>
</templae>
<script>
	this.$refs.video.src = res.data.video_url
    //正确写法：在需要动态绑定的方法里用$refs动态设置src
    this.$refs.audio.src = res.data.audio_url
   // this.audio_url = res.data.audio_url   //直接赋值，src失效写法
</script>

2-h5写法

document.getElementById("videoid").src=text+".mp4"; document.getElementById("videoid").play();

let dom = document.getElementById('audio');
dom.play();

3-video.js在vue中切换视频的正确方式

<tempalte>
	<video ref="videoPlayer" class="video-js" autoplay></video>
</tempalte>
<script>
    //初始化播放器
    this.player = videojs(
            this.$refs.videoPlayer,
            this.options,
            function onPlayerReady() {}
          );
    //切换src
    this.player.src('srcUrl')
    //或者
    //this.player.src({src:'srcUrl',type:'mp4'})
</script>

4-原生写法

<template>
    <video  controls="controls" id="videoPlay" >
    	<source :src="videoUrl" type="video/mp4" >
    </video>
</template>
 
<script>
    loadVideo(url) {
    	document.getElementById("videoPlay").src = url;
    },
</script>