H5 VIDEO标签备用视频代码

房州波哥 · 发表于 2024-7-16 09:32

需求场景:H5里默认视频源失效时，自动切换备用视频源。有效时则使用默认视频源。

要自动切换的，比如超时自动切换。比如5秒还没能加载成功默认视频源则自动加载备用视频源。
谢谢

Lefan817116 · 发表于 2024-7-16 09:32

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
</head>

<body>
  <video
    id="myVideo"
    controls
  >
    <source
      id="defaultSource"
      src="default.mp4"
      type="video/mp4"
    >
    <source
      id="backupSource"
      src="backup.mp4"
      type="video/mp4"
    >
    您的浏览器不支持视频标签。
  </video>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var video = document.getElementById('myVideo');
      var defaultSource = document.getElementById('defaultSource');
      var backupSource = document.getElementById('backupSource');

      // 切换到备用视频源的函数
      function switchToBackup() {
        video.src = backupSource.src;
        video.load(); // 加载新的视频源
        video.play(); // 可选：开始播放
      }

      // 检查默认视频源是否加载成功
      function checkDefaultSource() {
        if (video.readyState >= video.HAVE_ENOUGH_DATA) {
          console.log('默认视频源加载成功。');
        } else {
          console.log('默认视频源加载失败。正在切换到备用视频源。');
          switchToBackup();
        }
      }

      // 当视频的元数据加载完成时触发的事件监听器
      video.addEventListener('loadedmetadata', function () {
        checkDefaultSource();
      });

      // 设置超时，如果默认视频源在规定时间内未能加载成功，则切换到备用视频源
      setTimeout(function () {
        if (video.readyState < video.HAVE_ENOUGH_DATA) {
          console.log('超时时间已达到。正在切换到备用视频源。');
          switchToBackup();
        }
      }, 5000); // 5000毫秒（5秒）

    });
  </script>

</body>

</html>

房州波哥 · 发表于 2024-7-16 14:22

百度ai给写出来了

<!DOCTYPE html>
<html>
<head>
<title>自动切换视频源</title>
</head>
<body>

<video id="myVideo" width="320" height="240" controls>
  <source src="" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
function switchVideoSource() {
  var video = document.getElementById('myVideo');
  var sources = [
'video1.mp4',
'video2.mp4',
'video3.mp4'
  ];
  var currentSourceIndex = (video.src.endsWith(sources[sources.length - 1])) ? 0 : sources.indexOf(video.src) + 1;
  video.src = sources[currentSourceIndex];
  video.load(); // 清空缓存，重新加载视频
}

// 设置定时器，每隔一定时间自动切换视频源
setInterval(switchVideoSource, 5000); // 5000毫秒（5秒）
</script>

</body>
</html>

房州波哥 · 发表于 2024-7-16 14:24

上面切换视频源是5秒卡顿时循环切换，如果不让他循环，改哪个参数？

房州波哥 · 发表于 2024-7-16 14:46

自动切换，但不循环源代码，万能的百度ai也给写出来了

<!DOCTYPE html>
<html>
<head>
<title>Video Source Failover</title>
</head>
<body>

<video id="myVideo" width="320" height="240" controls>
  Your browser does not support the video tag.
</video>

<script>
var video = document.getElementById('myVideo');
var sources = [
  { src: 'video-1.mp4', type: 'video/mp4' },
  { src: 'video-2.webm', type: 'video/webm' },
  { src: 'video-3.ogv', type: 'video/ogg' }
];

function setupVideo() {
  for (var i = 0; i < sources.length; i++) {
var source = document.createElement('source');
source.src = sources[i].src;
source.type = sources[i].type;
video.appendChild(source);
  }

  video.load();
}

video.onerror = function() {
  if ('MediaSource' in window && MediaSource.isTypeSupported(video.type)) {
var mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
   var sourceBuffer = mediaSource.addSourceBuffer(video.type);
   fetch(video.src).then(function(response) {
      return response.arrayBuffer();
   }).then(function(arrayBuffer) {
      sourceBuffer.addEventListener('updateend', function() {
      if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
         mediaSource.endOfStream();
      }
      });
      sourceBuffer.appendBuffer(arrayBuffer);
   });
});
  } else {
console.log('No source available.');
  }
};

setupVideo();
</script>

</body>
</html>

房州波哥 · 发表于 2024-7-16 15:43

Lefan817116 发表于 2024-7-16 09:32
[mw_shl_code=html,true]

某个参数不对，播放时黑屏，进度条抖动

帐号		自动登录	找回密码
密码			注册[Register]

[经验求助] H5 VIDEO标签备用视频代码

最佳答案

免费评分