动态更改视频时,我在服务器控制台下收到以下错误
(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.
这是我的 fiddle
https://jsfiddle.net/q3hhk17e/36/
你能告诉我如何解决这个问题吗。
最佳答案
附上canplay事件到 #video元素,在 playlocalVID() 内调用创建 Blob URL来自 File对象,请注意没有必要同时调用 Blob()与 File对象作为参数;设置电流 File.name在 #video .dataset ;设置 <input type="file">元素 .value至 null对于 change连续选择相同文件时调用的事件;调用.load()在 #video元素;等待canplay或 canplaythrough将在 #video 分派(dispatch)的事件元素;在 canplay事件处理程序调用 .play()在 #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>
关于javascript - 动态更改视频使 play() 请求被新的加载请求中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40234873/
如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设
使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置,capistrano与用户deploy连接,这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
假设我有一个FireNinja我的数据库中的对象,使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么?更好的是,我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中,保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象,我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行,还是通过对对象本身做一些疯狂的事情,或者甚至通过删除它并使用相同的ID重新插入来做到这一点,这是问题的一部分。
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co