Vue 实现动态更改 video 的 src

在前端开发中，经常会遇到需要根据用户操作或不同场景动态更改 video 标签的 src 属性的需求。Vue 作为一款流行的 JavaScript 框架，提供了便捷的方式来实现这一功能。

我们需要在 Vue 组件中创建一个 data 属性来存储 video 的 src 路径。例如：

data() {
    return {
        videoSrc: ''
    }
}

这里我们初始化 videoSrc 为空字符串，后续根据具体情况来赋值。

接下来，在模板中使用 video 标签，并将其 src 属性绑定到我们刚刚定义的 videoSrc 数据属性上：

<template>
    <video src="{{ videoSrc }}" controls></video>
</template>

controls 属性为视频添加了浏览器自带的播放控制条，方便用户操作。

那么，如何动态更改 videoSrc 呢？这通常在方法中进行。比如，我们有一个按钮，点击按钮时更改视频源：

<template>
    <div>
        <video src="{{ videoSrc }}" controls></video>
        <button @click="changeVideoSrc">切换视频</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            videoSrc: ''
        }
    },
    methods: {
        changeVideoSrc() {
            // 这里根据需求动态赋值新的视频源路径
            this.videoSrc = 'new-video-url.mp4';
        }
    }
}
</script>

当用户点击“切换视频”按钮时，changeVideoSrc 方法被触发，videoSrc 被赋予新的值，从而实现了动态更改 video 的 src。

在实际应用中，视频源路径可能来自后端接口或者用户的某些复杂操作。这时，我们可以通过发送 AJAX 请求获取视频源路径，再将其赋值给 videoSrc。例如：

methods: {
    async getVideoSrcFromServer() {
        try {
            const response = await fetch('your-api-url');
            const data = await response.json();
            this.videoSrc = data.videoUrl;
        } catch (error) {
            console.error('获取视频源失败', error);
        }
    }
}

通过上述步骤，我们在 Vue 项目中成功实现了动态更改 video 的 src。这种方式不仅提高了用户体验，还增强了应用的灵活性和交互性，满足了各种复杂业务场景下的视频播放需求。