tự động thay đổi hình cung cấp cho các yêu cầu chơi() đã bị gián đoạn bởi một yêu cầu tải mới

Khi thay đổi tự động video, tôi đang nhận được lỗi sau dưới máy chủ giao diện điều khiểntự động thay đổi hình cung cấp cho các yêu cầu chơi() đã bị gián đoạn bởi một yêu cầu tải mới

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

Tôi đang sử dụng đoạn mã sau khi thay đổi xảy ra

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(); 
}

Nhưng khi thay đổi video 3-4 lần hoặc nhấp vào Remove nút

tôi đang nhận được vấn đề

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

Đây là fiddle tôi

https://jsfiddle.net/q3hhk17e/36/

Ông có thể xin vui lòng cho tôi biết làm thế nào để giải quyết vấn đề này.

Nguồn

2016-10-25 Pawan

bạn có thể xin vui lòng cho tôi biết những gì bạn có nghĩa là bằng bootstrap trong bối cảnh này? – Pawan

http://stackoverflow.com/questions/36803176/how-to-prevent-the-play-request-was-interrupted-by-a-call-to-pause-error – aergistal

chức năng nào được gọi bằng nút xóa? –

Đính kèm canplay sự kiện để #video yếu tố, trong playlocalVID() gọi tạo Blob URL từ File đối tượng, lưu ý nó không phải là cần thiết cũng phải gọi Blob() với đối tượng File như tham số; đặt hiện tại File.name tại #video.dataset; thiết lập <input type="file"> yếu tố .value đến null cho change sự kiện được gọi khi cùng một tệp được chọn liên tiếp; hãy gọi .load() tại #video yếu tố; đợi canplay hoặc canplaythrough sự kiện được gửi đi theo số #video; tại canplay trình xử lý sự kiện, gọi .play() tại #video phần tử.

<!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>

Nguồn

2016-11-01 06:40:47 guest271314

@UnKnown plnkr http://plnkr.co/edit/IeXs3TKi9A5gkWmriL88?p=preview – guest271314

tự động thay đổi hình cung cấp cho các yêu cầu chơi() đã bị gián đoạn bởi một yêu cầu tải mới

Trả lời

Các vấn đề liên quan