动态更改视频时，我在服务器控制台下收到以下错误
(index):71 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
发生更改时我使用以下代码
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 次或单击“删除”按钮时
我收到问题了
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
这是我的小提琴
https://jsfiddle.net/q3hhk17e/36/ https://jsfiddle.net/q3hhk17e/36/
您能让我知道如何解决这个问题吗？
Attach canplay事件至#video元素，内playlocalVID()调用创建Blob URL from File对象，注意没有必要同时调用Blob() with File对象作为参数；设定电流File.name at #video .dataset; set <input type="file">元素.value to null for change连续选择同一文件时调用的事件；称呼.load() at #video元素;等待canplay or canplaythrough事件发送至#video元素;在canplay事件处理程序调用.play() at #video元素。
<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
