选择本地视频并在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视频播放器中播放(全部本地,同一文件夹) 的相关文章

  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何停止TinyMCE删除span标签?

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 在 IOS 10 beta 7 (Safari) 中使用 webGL 渲染视频 - 显示奇怪的紫色

    我正在 webGL 中渲染视频 通过传递Video对象作为源texImage2D 这在所有平台 支持 webGL 中都很好用 但是在 IOS 10 beta 7 的 Safari 中 它以奇怪的颜色渲染 在以前的 IOS 版本中看起来还不错
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 使用 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 和视频 位于同一本地文件夹中 对于选择的东西 我使用一个表格