动态更改视频会使play（）请求被新的加载请求中断

本文介绍了动态更改视频会使play（）请求被新的加载请求中断的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

动态更改视频时，我在服务器控制台下收到以下错误

When dynamically changing the video , i am getting the following error under server console

(index):71 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

我在更改时使用以下代码

I am using the following code when change occurred

function playlocalVID()
{
        var player = document.getElementById("video");
        var currentVID = document.getElementById('currentVID');
        var selectedLocalVID = document.getElementById('howtovideo').files[0];
        currentVID.setAttribute('src', URL.createObjectURL(new Blob([selectedLocalVID])));
        player.load();
        player.play();
}

但更改视频3 - 4次或点击删除按钮

But when changed the video 3 - 4 times or clicked on Remove Button

我遇到问题

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

这是我的小提琴

您能否告诉我如何解决此问题。

Could you please let me know how to resolve this issue .

推荐答案

附加 canplay 事件到 #video 元素，在 playlocalVID（）中调用create Blob URL 来自文件对象，请注意，无需同时调用 Blob（） 文件对象作为参数;设置当前 File.name at #video .dataset ;设置< input type =file> 元素 .value 到 null for 更改连续选择同一文件时要调用的事件;在 #video 元素中调用 .load（）;等待 canplay 或 canplaythrough 事件将在 #video 元素; at canplay 事件处理程序调用 .play at #video 元素。

Attach canplay event to #video element, within playlocalVID() call create Blob URL from File object, note it is not necessary to also call Blob() with File object as parameter; set current File.name at #video .dataset; set <input type="file"> element .value to null for change event to be called when same file is selected in succession; call .load() at #video element; wait for canplay or canplaythrough event to be dispatched at #video element; at canplay event handler call .play() at #video element.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="form-group last">
    <label class="control-label col-md-3">How to video</label>
    <div class="col-md-9">
      <div class="fileinput fileinput-new" data-provides="fileinput">
        <figure>
          <video id="video" width="150" height="100" controls>
            <source id='currentVID' src="" type="video/mp4">
          </video>
          <figcaption></figcaption>
        </figure>
        <div class="fileinput-preview fileinput-exists" style="max-width: 200px; max-height: 150px;"></div>
        <div>
          <span class="btn default btn-file">
            <span class="fileinput-new"> Select Video </span>
          <span class="fileinput-exists"> Change </span>
          <input type="file" id="howtovideo" name="howtovideo" accept="video/mp4" autoplay onchange="playlocalVID();" />
          </span>
          <a href="javascript:;" class="btn red fileinput-exists removepic" data-name="removeforhowtovideo" data-dismiss="fileinput"> Remove </a>
        </div>
      </div>
    </div>
  </div>
  <script>
    var player = document.getElementById("video");
    var currentVID = document.getElementById('currentVID');
    var caption = document.querySelector("figcaption");
    var selectedLocalVID = document.getElementById("howtovideo");
     // reference to `Blob URL` to be created at `playLocalVID`
    var url;
     // attach `canplay` event to `player`
    player.addEventListener("canplay", function handleEvent(e) {
      this.play();
      // set `figcaption` to current video `File.name`
      caption.innerHTML = this.dataset.currentVideo;
    });

    function playlocalVID() {
      if (url) {
        console.log(url);
        // if `url` is defined revoke existing `Blob URL`
        URL.revokeObjectURL(url);
      }
      // create `Blob URL` of `File` object
      url = URL.createObjectURL(selectedLocalVID.files[0]);
      // set `.name` of current `File` at `player.dataset.currentVideo`
      player.dataset.currentVideo = selectedLocalVID.files[0].name;
      // reset `input type="file"` event
      selectedLocalVID.value = null;
      // call `.pause()` at `player`
      player.pause();
      // set new `src` at `<source>` element
      currentVID.setAttribute("src", url);
      // call `.load()` on `player`
      // wait for `canplay` event
      player.load();
    }
  </script>
</body>

</html>

                        这篇关于动态更改视频会使play（）请求被新的加载请求中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！