js怎么导入视频

原创

ithorizon 7个月前 (09-14) 阅读数 100 #Javascript

JS导入视频的几种行为

在网页中，我们可以使用HTML5的

方法一：使用HTML5的

我们可以先在HTML文档中定义一个空的


<video id="myVideo" width="320" height="240" controls>
  您的浏览器不拥护视频标签。
</video>
<script>
  // 获取video元素
  var video = document.getElementById('myVideo');
  // 创建source元素
  var source = document.createElement('source');
  source.setAttribute('src', 'video.mp4'); // 设置视频源的路径
  source.setAttribute('type', 'video/mp4'); // 设置视频的类型
  // 将source元素添加到video中
  video.appendChild(source);
  // 或者直接通过DOM属性设置视频源
  // video.src = 'video.mp4';
  // video.type = 'video/mp4';
  // 加载视频
  video.load();
</script>

方法二：通过AJAX请求获取视频数据

这种方法比较繁复，通常用于获取视频流数据。


<video id="myVideo" width="320" height="240" controls></video>
<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'video.mp4', true);
  xhr.responseType = 'blob'; // 设置响应类型为blob
  xhr.onload = function(e) {
    if (this.status == 200) {
      // 创建video的source元素
      var source = document.createElement('source');
      source.setAttribute('type', 'video/mp4');
      // 使用URL.createObjectURL来创建视频源链接
      source.src = URL.createObjectURL(this.response);
      // 获取video元素并添加source
      var video = document.getElementById('myVideo');
      video.appendChild(source);
      // 加载视频
      video.load();
    }
  };
  xhr.send();
</script>

方法三：使用HTML5的File API

如果用户从本地选择了视频文件，我们可以使用File API来获取文件并显示。


<input type="file" id="fileInput" accept="video/*">
<video id="myVideo" width="320" height="240" controls></video>
<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    var file = this.files[0];
    if (file) {
      var video = document.getElementById('myVideo');
      video.src = URL.createObjectURL(file);
      video.load();
    }
  });
</script>