音频视频测试地址与简单编写

视频测试地址：
3秒https://www.w3school.com.cn/i/movie.ogg
10秒https://www.runoob.com/try/demo_source/mov_bbb.mp4
10秒https://www.runoob.com/try/demo_source/movie.mp4
1分钟http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
46秒http://vjs.zencdn.net/v/oceans.mp4
52秒http://vjs.zencdn.net/v/oceans.mp4
音频测试地址：
有道词典(改变地址最后单词即改变对应单词文件)http://dict.youdao.com/dictvoice?type=1&audio=sheila

        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            @close="dialogClose">
            <video ref="video" width="100%" height="100%" controls :src="srcVedio" autoplay/>
        </el-dialog>
        <audio ref="audio" controls :src="srcAudio" type="audio/mpeg" autoplay v-show="true">
        </audio>

    data(){
    
    
        return {
    
    
            //  定时器对象
             timeout:'',
            // 播放视频的弹窗显隐  与路径
            dialogVisible:false,
            srcVedio:'',
            srcAudio:'',
        }
     },
    methods: {
    
    
        // 关闭视频弹窗
        dialogClose(){
    
    
            this.dialogVisible=false;
            this.srcVedio = ''
            // this.$refs.video.pause();
        },
        // 点击播放视频
        clickShipin(address){
    
    
            this.srcAudio = ''
            this.dialogVisible=true;
            this.srcVedio = address
        },
        // 点击播放音频 　play()：播放 pause()：暂停  load()：重新加载
        clickYinpinn(address){
    
    
            this.$refs.audio.load();
            this.srcAudio = address
        },
    },