HTML5视频播放器:动态加载视频

2024-03-26

那么,使用兼容 HTML 5 的视频播放器(如 Video JS),如何动态加载视频,而无需重新加载整个页面呢?想象一下,一个链接列表(类似于播放列表),每个链接都指向一个视频。单击链接时,我想将所选视频加载到播放器中。

目前,我正在使用一个包含视频播放器的 Iframe,因此基本上我将一个变量传递到 Iframe,然后重新加载它。我认为这并不理想,原因如下:它不允许视频全屏显示,“后退”按钮不仅会将 Iframe 移回到主页,而且它还是一个 Iframe。我宁愿避免这种情况。

有想法吗?谢谢!


想出了一个简单的解决方案。这是脚本;把这个放在脑子里:

function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}

然后 HREF 将调用该函数:

<a href="#" onClick="javascript:vidSwap('myMovie.m4v'); return false;">Link</a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5视频播放器:动态加载视频 的相关文章

  • Nest Elastic - 构建动态嵌套查询

    我必须使用 Nest 查询嵌套对象 但是查询是以动态方式构建的 下面的代码演示了以静态方式对嵌套 书籍 进行查询 QueryContainer qry qry new QueryStringQuery DefaultField name D
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • Video.js - 阻止点击播放功能

    我正在使用 video js 将视频嵌入到 HTML 页面中 它将用作仅适用于 ipad 的 Web 应用程序 因此我相信它使用的是本机 HTML5 播放器 我正在尝试禁用点击播放功能 以便用户必须使用控件 但我在这样做时遇到了麻烦 我尝试
  • 如何从List()中获取数据? [复制]

    这个问题在这里已经有答案了 我的代码是这样的 var eventDocs new List
  • 元素上的框阴影行为

    Update 在我提交错误报告后 https bugs chromium org p chromium issues detail id 763337 https bugs chromium org p chromium issues de
  • 为什么有人将(Apache mod_expires 参数)ExpiresByType 设置为“访问加 0 秒”?

    在审查答案时这个帖子 https stackoverflow com questions 9933012 how to use mod headers and mod expires to cache 我不明白为什么这里使用 0 秒作为最佳
  • Android - 如何合并两个视频

    基本上 我正在寻找一种将两个 mp4 视频文件 在 SD 卡上 组合在一起的方法 更像是在第一个视频的末尾附加第二个视频 我进行了很多搜索 但找不到合适的解决方案 好吧 我根本找不到任何解决方案 所以我的问题是 是否有一个库可以组合 并可能
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • html 下钻下拉所选值未插入 MYSQL

    我有两个下拉列表 首先从数据库下拉填充 根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj
  • 如何将 HTML 代码转换为 Confluence 风格的 Wiki 标记?

    Mylyn Wikitext 的 API 文档具有将 Wiki 标记转换为 HTML 的函数 但我找不到将 HTML 代码转换 解析为 Wiki 标记的函数 班级MarkupParser有方法parseToHTML 但是我在哪里可以找到相反
  • 2013 年 HTML 电子邮件:如何控制段落和图像等元素之间的间距?

    我目前正在重新设计一些 HTML 电子邮件模板 这是我几年来没有做过如此深入的事情 我已经在 HTML 文件中制作了模板 我正在浏览器中本地测试该模板 一切看起来都很好 我使用表格进行布局 我使用的唯一其他标签是 p a and img C
  • 禁用 Firefox 的自动填充

    是否可以禁用 Firefox自动填充功能而不禁用自动完成 我知道我可以这样做 autocomplete off 但我不想禁用自动完成 只是禁用自动填充 Firefox 正在填充一些本应为空的隐藏字段 这主要是用户刷新页面时出现的问题 表单字
  • Bootstrap 全角,有 2 种不同的背景(和 2 列)

    这有点难以解释 这就是为什么我在谷歌上也找不到答案 我正在使用 Bootstrap 3 并且需要全宽背景图像 在那 2 个透明颜色背景之上 我制作了一个示例图片以使其更清楚 1 2 组合透明彩色背景 3 4 组合透明彩色背景 1 2 3 4
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 如何制作复选按钮? (带有标签的隐藏复选框作为按钮:仅限 CSS)

    Using 方法1 创建可点击标签 https stackoverflow com a 6293626 1326147 用 CSS 隐藏复选框 https stackoverflow com a 18078908 1326147 and 使
  • 修复 PHP 中格式错误的 HTML?

    我正在根据用户提供的片段构建一个大型 HTML 文档 这些用户有以各种方式格式错误的烦人习惯 浏览器足够强大且宽容 但我希望能够验证并 理想情况下 修复任何格式错误的 HTML 如果可能的话 例如 td b Title b td 可以合理地
  • jQuery 提交未触发

    我觉得问这个很愚蠢 但为什么我的 submit 没有发出警报 HTML div class buttonbar style margin left 10 div
  • 在各种分辨率下通过百分比宽度将根 div 居中

    我需要通过基于百分比的宽度而不是基于像素的宽度将根 div 居中 container width 80 margin 0px auto 它将容器相对于页面居中 并在 1366 706 分辨率下正常工作 但在 1280 1024 下不起作用
  • 为什么行框之间有空格,而不是由于半行距?

    在下面的代码示例中 您将看到垂直流动的之间有空白spans是 每个之间有空白line box 我想首先声明这与之间的差距无关inline block框 甚至是结果半领先 https www w3 org TR CSS21 visudet h
  • 猫头鹰轮播,制作自定义导航

    所以我有一个包含三张图像的猫头鹰旋转木马 我还在左侧和右侧添加了自定义导航箭头 png 图像 然而 这些箭头目前是无用的 因为我找不到一种方法来真正让它们在我的猫头鹰旋转木马的图像之间切换 我无休止地寻找 找不到解决方案 有任何想法吗 您需

随机推荐

  • SharePoint 2013 REST API odata $filter 忽略 Unicode 字符,例如德语元音变音 äöü

    我正在尝试将 SharePoint 2013 REST API odata 与 unicode 字符 例如元音变音 结合使用 select Title 2CID filter substringof 28 27hello 20w F6rld
  • Airflow + Cluster + Celery + SQS - Airflow Worker:“Hub”对象没有属性“_current_http_client”

    我正在尝试对我的 Airflow 设置进行集群 并且正在使用本文 https i stack imgur com JRNOj png这样做 我刚刚配置了我的airflow cfg文件以使用CeleryExecutor 我指着我的sql al
  • ReactJS - 无法从另一个文件导入组件

    我正在尝试将组件从一个文件导入到 ReactJS 中的另一个文件中 我在下面粘贴了我的代码 显示了我当前如何尝试将 addUser 组件导入到 App js 中 控制台只显示正在触发的App组件 但不显示addUser 我认为这可能是 we
  • PHP空白页,没有错误[重复]

    这个问题在这里已经有答案了 我有一个本地开发的 PHP 页面 运行良好 将其上传到服务器后 我现在只得到一个空白的白屏 这是完全相同的代码 在本地工作正常 但在远程工作则不然 我已经尝试设置错误报告 但仍然没有给我任何错误 只是一个空白的白
  • 将特定枚举反序列化为 Json.Net 中的 system.enum

    我有一个相当通用的 规则 类 我用它来驱动我正在编写的分析引擎的行为 public class Rule
  • 了解 REST 响应和 HTTP 状态代码

    我想知道我应该如何在 REST API 中做出响应 有效示例 http blah com api v1 dosomething 123 以上是一个有效的请求 目前我的 HTTP 状态为 200 并带有 JSON 响应 dosomething
  • 未访问请求数据时出现 Flask 405 错误且路径有效

    当我实际上没有对连续的相同请求使用请求正文时 我收到 405 错误 Example app Flask name CORS app app route login methods POST def login return jsonify
  • .NET 4.5 中的序列化异常

    当我调用时 我得到了这个堆栈跟踪 XslCompiledTransform Transform XmlDocument DocumentElement CreateNavigator null StringWriter System Con
  • 为我的组件位图属性赋值时发生访问冲突[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我正在尝试创建一个必须使用位图的组件
  • INSTALL_FAILED_INVALID_APK 错误,调试版本代码 1 与 0 不一致

    我在 Android Studio 版本 2 3 3 上构建了一个 Android 应用程序 当我尝试将应用程序部署到手机 lennovo 或模拟器 GenyMotion 时 出现错误 内容如下 INSTALL FAILED INVALID
  • ASP.net C# 将 int 解析为日期时间

    给定时间 1286294501433 它表示自 1970 年以来经过的毫秒数 我们如何将其转换为 DateTime 数据类型 例如 transactionTime 1286294501433 UInt64 intTransTime UInt
  • 在哪里可以看到 deno 下载的软件包?

    我是新来的deno目前正在探索 deno 的最小可行项目 我想要喜欢 npm 它会下载文件夹内的 npm 包node modules 同样我想看到迪诺包在一个目录中 在我当前的项目中 我没有看到任何下载的包 请建议我在哪里寻找 deno 软
  • Odoo 服务器无法在 Windows 10 中启动

    我在其官方社区版本页面上下载并安装了 odoo 13 然后当我安装一切正常并启动 odoo 时 浏览器会打开 localhost 8069 即 odoo 端口 并且不会打开任何内容 服务器只是不打开开始 我运行 odoo bin 这是我的错
  • Python 中的循环列表迭代器

    我需要迭代一个循环列表 可能很多次 每次都从最后访问的项目开始 用例是连接池 客户端请求连接 迭代器检查指向的连接是否可用并返回它 否则循环直到找到可用的连接 我怎样才能在Python中巧妙地做到这一点 If you instead nee
  • 在 iPhone SDK 上实现动画的最佳方法?

    我知道如何通过移动 调整 UIView 的大小来实现基本动画 不过下面两个动画就显得有点复杂了 1 想象一下汽车游戏 当您按下踏板按钮时 车速表就会旋转 如何制作那种条形 填满 圆形的动画 2 第二个动画更容易描述 如何制作数字增加的动画
  • FactoryGirl:填充具有许多关系的保留构建策略

    我的问题似乎很常见 但我没有在文档或互联网本身中找到任何答案 这似乎是这个问题的克隆has many 同时尊重factory girl 中的构建策略 https stackoverflow com questions 1506556 has
  • 有关使用 TortoiseGit 与 SVN 存储库交互的说明?

    多年来 我一直在 Windows 上使用 TortoiseSVN 为我自己的项目提供本地文件系统存储库 我计划开始与一位朋友合作开发其中一个项目 并将存储库转移到我自己的网站上 我读过很多 git 击败 SVN 的文章 过去几年的帖子 我想
  • 使用 helm 进行 Kubernetes 作业更新

    我有一个 Kubernetes 集群 我正在使用 Helm 在那里部署我的应用程序 一切工作正常 但一方面是工作更新 正如我所读到的 作业是不可变的 这就是它们无法更新的原因 但我不明白 为什么 helm 不像 Pod 那样创建新作业 最后
  • 在 .NET Core 项目中添加 PDF 链接

    我想将 PDF 文件添加到我的 net core 2 0 项目中 它在我的本地主机上使用 IIS Express 运行 我已经将 pdf 文件添加到我的项目文件中 它显示在解决方案资源管理器中 并且我在中添加了相应的链接我的 cshtml
  • HTML5视频播放器:动态加载视频

    那么 使用兼容 HTML 5 的视频播放器 如 Video JS 如何动态加载视频 而无需重新加载整个页面呢 想象一下 一个链接列表 类似于播放列表 每个链接都指向一个视频 单击链接时 我想将所选视频加载到播放器中 目前 我正在使用一个包含