Menu
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();
}
But when changed the video 3 - 4 times or clicked on Remove Button
i am getting the issue
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
This is my fiddle
https://jsfiddle.net/q3hhk17e/36/
Could you please let me know how to resolve this issue .
337
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
