选择本地视频并在HTML5视频播放器中播放(全部本地,同一文件夹)

2024-01-16

对于学校,我需要使用带有额外控件的 HTML5 视频播放器以及从本地驱动器选择文件的选项。该页面也在本地运行。所以没有上传。文件(HTML 和视频)位于同一本地文件夹中。

对于选择的东西,我使用一个表格<form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>。现在这是我的 JavaScript,它应该操纵视频播放器的源:

function open()
{
    var file=document.getElementById('chosen');
    var fileURL = window.URL.createObjectURL(file);
    player.src=fileURL;
    player.load();
}

视频播放器看起来像这样:

<video id=player>
<source src="big-buck-bunny_trailer.webm" type="video/webm" />
<source src="trailer_480p.mov" type"video/mp4" />
</video>

当然,我已将变量“播放器”与我的视频播放器连接起来。 player.load() 东西工作正常,因此该函数被正确调用。

现在我的问题是:Javascript 部分有什么问题或缺失?该项目没有按照解释进行。

也许你可以帮助我。谢谢 ;)


我不确定你在问什么,但你的脚本中有一些问题。

function openPlayer(){ // open() is a native function, don't override
  var vplayer=document.getElementById('player'); // A reference to the video-element
  var file=document.getElementById('chosen').files[0]; // 1st member in files-collection
  var fileURL = window.URL.createObjectURL(file);
  vplayer.src=fileURL;
  vplayer.load();
  return; // A good manner to end up a function
}

并且不要忘记更改函数的名称onclick().

更多信息关于<video>: https://developer.mozilla.org/en/HTML/Element/video https://developer.mozilla.org/en/HTML/Element/video

特别是对于脚本编写:https://developer.mozilla.org/en/DOM/HTMLMediaElement https://developer.mozilla.org/en/DOM/HTMLMediaElement

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

选择本地视频并在HTML5视频播放器中播放(全部本地,同一文件夹) 的相关文章

随机推荐

  • 使用 Ext.grid.Panel.reconfigure() 破坏网格 RowEditing 插件

    我正在创建一个 extjs 网格面板 其中有一组用户可配置的列 这Ext grid Panel http docs sencha com ext js 4 1 api Ext grid Panel组件提供了一个方便的reconfigure
  • 如何将卫星程序集(本地化资源)包含在使用 WiX 构建的 MSI 中?

    我正在从事的项目正在从使用 VS2008 部署 安装程序切换到 WiX 我目前对 WiX 还很陌生 我添加了将资源项目的输出复制到 Resources dll 中的代码 但在旧的 VS2008 安装程序文件系统中 还存在本地化资源输出 该输
  • 调用 mouseClicked() 后 JComponent 消失

    我正在用 Swing 编写一个 Java GUI 程序 界面如下所示 当用户单击右侧的其中一张图片时 我希望在左上角的橙色区域中显示它的小预览 我通过以下方式从计算机上的目录中提取所有图像文件SwingWorker线程 http docs
  • 无法打开登录请求的服务器

    我正在尝试使用 pyodbc 连接到我的 Azure SQL 数据库 我正在使用的azure帐户位于用户名下 电子邮件受保护 cdn cgi l email protection 我的大学帐户 当我尝试连接到数据库时 出现错误 Cannot
  • 如何在轮子中包含和安装测试文件并部署到 Databricks

    我正在开发一些在 Databricks 上运行的代码 鉴于 Databricks 无法在本地运行 我需要在 Databricks 集群上运行单元测试 问题是当我安装包含我的文件的轮子时 测试文件永远不会安装 如何安装测试文件 理想情况下我想
  • 如何在使用 VS Code 调试之前执行批处理文件

    我正在使用 Typescript nodeJS 和 VS Code 进行开发 使用 VS Code 进行调试 我的配置中有launch json type node request launch name Launch via NPM ru
  • 如何在 WPF ListView 中查看最后添加的列表视图项

    我正在使用视图模型绑定到列表视图 每次我在视图模型内部可观察集合中添加一个项目时 我都会使用 list Count 1 触发 LastIndex 属性 列表视图绑定到 VM 的 LastIndex 属性 并且列表视图正确选择添加到视图的最后
  • Typescript getter 和 setter 错误

    好吧 这是我第一天使用 typescript 做一些 Angular 2 我尝试制作一个简单的 getter 和 setter 服务 import Injectable from angular2 core Injectable expor
  • JPA:请帮助理解“join fetch”

    我有以下实体结构 业务 gt 营销活动 gt 促销 其中一个业务可以有许多营销活动 一个营销活动可以有许多促销活动 两个一对多关系都被声明为 LAZY 在我的代码中的一处 我需要急切地从 Business 中获取这两个集合 所以我这样做 Q
  • 在 data.table 中动态创建过滤表达式 (i)

    有一个data table library data table dd lt data table x 1 10 y 10 1 z 20 20 我可以使用过滤它 dd x in c 1 3 z in c 12 20 x y z 1 1 10
  • 如何屏蔽 EditText 以显示 dd/mm/yyyy 日期格式

    我怎样才能格式化EditText遵循 dd mm yyyy 格式化的方式与我们使用 a 格式化的方式相同TextWatcher to mask用户输入看起来像 0 05 我不是在谈论限制字符或验证日期 只是屏蔽到以前的格式 我写了这个Tex
  • 替换属于特定类的所有元素

    我试图开发一个嵌入式小部件 用户将包括一个anchor标签和页面中的 JavaScript 它将呈现内容 类似于嵌入式推文 a href http localhost 3000 user 13 target blank class my w
  • 添加新代码后 jQuery.keynav 不起作用

    我正在使用 jquery keynav 插件使用五个键在网页上执行导航 问题在于 我使用的是荧光笔 div 它引导用户浏览网页 可以获取 div 中的内容 文本等 并且可以执行多个操作 但荧光笔 div 不起作用 而是包含在网页 任何网页
  • JSTL 格式日期忽略区域设置

    我想用 JSTL 本地化日期 并且我正在尝试像下面那样执行此操作
  • 将数据结构从 java 传递到 perl(反之亦然)

    几天前 我询问了如何将数据结构从 java 传递到 perl 反之亦然 其中之一就是 JSON 我玩过它 主要使用 Gson for java 看起来相当不错 唯一的问题是我的数据结构内部有引用 同一数据结构内的其他对象 目前 每个此类引用
  • 词汇中的“这个”是什么? [复制]

    这个问题在这里已经有答案了 有人可以给我简单介绍一下词汇 this 吗 与函数表达式相比 箭头函数表达式 也称为胖箭头函数 具有更短的语法 并且在词法上绑定 this 值 不绑定自己的 this arguments super 或 new
  • 允许 this 引用转义

    我希望能帮助您理解 Java 并发实践 中的以下内容 调用可重写的实例方法 既不是 构造函数中的 private 或 Final 也可以允许 这个参考逃避 这里的 转义 是否仅仅意味着我们可能在实例完全构造之前调用实例方法 我没有看到 th
  • 将 OpenID 与 Zend Framework 结合使用

    我希望我的网站能够完全执行 Stackoverflow 使用 openId 所做的操作 我正在梳理资料来源 之前我也曾在 facebook 上这样做过 但是 OpenID 方面没有取得太大进展 我想做的只是检测是否有人登录了谷歌 如果他们获
  • php facebook sdk 不会在 wordpress 中创建用户

    编辑后的问题 我试图在我的 WordPress 网站上使用 Facebook 登录插件this sdk https stackoverflow com questions 6034813 facebook uncaught oauthexc
  • 选择本地视频并在HTML5视频播放器中播放(全部本地,同一文件夹)

    对于学校 我需要使用带有额外控件的 HTML5 视频播放器以及从本地驱动器选择文件的选项 该页面也在本地运行 所以没有上传 文件 HTML 和视频 位于同一本地文件夹中 对于选择的东西 我使用一个表格