jjzjj

javascript - 动态更改视频使 play() 请求被新的加载请求中断

coder 2024-07-19 原文

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

(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">元素 .valuenull对于 change连续选择相同文件时调用的事件;调用.load()#video元素;等待canplaycanplaythrough将在 #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/

有关javascript - 动态更改视频使 play() 请求被新的加载请求中断的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移,将表更改为 MyISAM - 2

    如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设

  2. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  3. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移: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

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的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服务器更新战俘

  6. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的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

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象,使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么?更好的是,我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中,保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象,我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行,还是通过对对象本身做一些疯狂的事情,或者甚至通过删除它并使用相同的ID重新插入来做到这一点,这是问题的一部分。

  10. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的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

随机推荐