如何动态切换html5视频源？_颤动视频播放器动态切换视频源_如何向具有动态源的HTML5视频添加Auth头 - 腾讯云开发者社区

如何动态切换html5视频源？

基础概念

HTML5 视频（<video>）元素允许你在网页上嵌入视频内容。动态切换视频源意味着在视频播放过程中，改变视频的来源，而不需要重新加载整个页面。

类型

通过 JavaScript 切换源：使用 JavaScript 修改 <video> 元素的 src 属性。
通过服务器端切换：服务器根据请求返回不同的视频源 URL。

应用场景

视频播放列表：用户可以在一个页面上观看多个视频，点击不同的视频项时切换源。
广告轮播：在视频播放前插入广告，广告结束后切换回主视频。
内容更新：实时更新视频内容，如新闻报道、直播等。

示例代码

以下是一个通过 JavaScript 动态切换 HTML5 视频源的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Video Source Switching</title>
</head>
<body>
    <video id="myVideo" width="640" height="360" controls>
        <source src="video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button onclick="changeVideoSource('video2.mp4')">Switch to Video 2</button>

    <script>
        function changeVideoSource(newSource) {
            const videoElement = document.getElementById('myVideo');
            videoElement.src = newSource;
            videoElement.load(); // 重新加载视频
            videoElement.play(); // 播放新视频
        }
    </script>
</body>
</html>

遇到的问题及解决方法

问题：视频切换后无法播放

原因：可能是新视频源的 URL 不正确，或者浏览器缓存了旧的视频源。

解决方法：

检查 URL：确保新视频源的 URL 是正确的。
清除缓存：在切换视频源之前，可以尝试清除浏览器缓存或使用 videoElement.load() 方法重新加载视频。

function changeVideoSource(newSource) {
    const videoElement = document.getElementById('myVideo');
    videoElement.src = newSource;
    videoElement.load(); // 重新加载视频
    videoElement.play().catch(error => {
        console.error('Error playing video:', error);
    });
}