响应式视频播放器

2024-04-15

我需要一个使用 bootstrap 开发的响应式布局网站的视频播放器。这意味着当我重新调整屏幕大小或在不同尺寸的屏幕中查看页面时,播放器应该自动适合屏幕。

我尝试过 jwplayer 和 flowplayer 但没有成功。

http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight

注意:播放器应该能够播放 youtube 视频......

有没有办法让 jwplayer/flowplayer 响应?


卢卡答案的更好版本:

$(window).resize(function() {
    var $width = $("#holder").width();
    var $height = $width/1.5;
    jwplayer().resize($width,$height);
});

用户resize来自 JW Player API 的函数:

http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player

另一种解决方案:

检查他们的响应式设计支持文档:http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support

<div id="myElement"></div>
<script>
    jwplayer("myElement").setup({
        file: "/uploads/myVideo.mp4",
        image: "/uploads/myPoster.jpg",
        width: "100%",
        aspectratio: "12:5" // Set your image ratio here
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

响应式视频播放器 的相关文章

  • 为什么我的响应式 html/css 无法在手机上运行?

    我创建了一个测试地点 https test chozan co 我在 css 中使用了媒体查询 但是当我在移动设备上加载页面时 我看不到移动版本 并且当我重新调整浏览器大小时 网站会响应 我在多个地方读过不要使用 device width
  • CSS Flexbox - 根据屏幕尺寸组织弹性项目

    我有一个弹性项目容器 我试图根据屏幕尺寸以不同的布局组织不同数量的弹性项目 例如 在桌面上 我想要有 4 个容器 每个容器有 2 个项目 布局在 2x4 网格中 每个单元格为 1x2 我似乎无法理解的是纯粹使用 Flexbox 在平板电脑上
  • 强制嵌入推文为 100% 宽度

    我试图通过将宽度设置为 100 来强制嵌入的推文做出响应式行为 我尝试按如下方式调整内联宽度 blockquote class twitter tweet width 100 blockquote 我还尝试对 twitter tweet 类
  • 如何识别网站中的慢速设备?

    当为移动设备调整网页时 我总是依赖 CSS 媒体查询 最近我不再只担心屏幕尺寸 还担心许多移动设备的 javascript 引擎 一些依赖于窗口滚动或快速 DOM 转换序列的常见 javascript 效果在慢速设备上效果非常糟糕 有没有办
  • jwplayer:如何禁用对视频未观看部分的搜索?

    我使用的是jwplayer 6 8 4616 我不希望用户寻找他还没有看过的视频部分 允许寻找已经看过的部分 但无法找到好的解决方案 我努力了JWPlayer 防止向前跳 除非已经看过 https stackoverflow com que
  • CSS 媒体查询不起作用[重复]

    这个问题在这里已经有答案了 我一直尝试在 CSS 文档中进行媒体查询 执行以下操作 media screen and max device width 480px css here 但当我在 iPhone 上测试时 它不起作用 我尝试过更改
  • 检查视频是否正在流式传输

    我有这个流来自http www tpai tv live http www tpai tv live但正如您现在所看到的 它已关闭 我需要检查流是否正在播放 如果不播放其他内容 这是流式传输代码
  • 如何在 Twitter Bootstrap 中自定义响应列和输入字段?

    主要问题是如何自定义 bootstrap 响应式 css 我的代码部分有效 但我无法修复这种情况 这很难解释 所以为了更好地理解 我在屏幕截图上进行了可视化呈现 我发布了实际清理过的模板代码JSFIDDLE http jsfiddle ne
  • 如何使用javascript根据用户需求触发媒体查询

    我有一个响应式网页 针对不同的屏幕尺寸具有不同的设计 我正在使用 mediaquery 来更改我的设计 我想让用户能够更改更小或更大屏幕尺寸的设计 即使屏幕尺寸没有改变 是否可以在不改变屏幕尺寸的情况下用js触发 mediaquery 看一
  • carouFredSel 响应高度

    我使用 carouFredSel 时遇到响应式旋转木马的高度问题 因为图像是响应式的 并且轮播也设置为响应式的 它仍然将图像的最大高度添加到 div 中 当我的图像宽度为 740 高度为 960 时 它将图像大小调整为响应宽度以适合屏幕 图
  • Firefox 中忽略的图像最大高度百分比

    HTML div class container div
  • 引导表上的滚动条

    I have table渲染在一个panel这是在一个modal 由于表格相对较大 我想将其行数限制为 5 行 以便模式不会滚动 我浏览了 SO 和谷歌 到处都看到我需要设置overflow y auto or overflow y scr
  • Bootstrap 如何从一个类切换到下一个类?

    我试图理解Bootstrap 3的反应能力 我明白在css如果一个元素有 2 个类 那么第二个类将覆盖第一个类 但是 当您使用以下命令创建响应式设计时Bootstrap 您的元素将如下所示 div class col sm 1 col md
  • 设置存储在 Blob 上的媒体文件的内容类型

    我们有一个托管在 Azure 上的网站 它是基于媒体的 我们使用 JWPlayer 通过 HTTP 伪流来播放媒体 媒体文件以 3 种格式存储在 blob 上 mp4 ogg webm 问题是所有类型的媒体文件的内容类型都设置为应用程序 八
  • 在响应式设计中将顶部元素移动到底部的最佳方法是什么

    我有以下 HTML 格式 将给定元素放置在桌面上的顶部和移动设备上的底部 宽度 p I am on the top of desktop page and bottom of mobile page p 以响应式方式重新排序未知高度的元素最
  • 如何从 JW Player 5.1 中提取 .flv 流?

    问题是我的互联网连接速度很慢 并且视频不像 YouTube 那样缓冲 因此我想知道是否可以提取 JW Player 中正在流式传输的 flv 文件的 url 并直接下载它 做了一些初步研究 我发现了以下信息 主要视频网址 http ijf1
  • 如何使 Nivo 滑块响应式

    我在 WordPress 中使用 NivoSlider 并对主题实现了一些响应式 css 我也修复了 Nivo Slider 中图像的宽度和高度以及背景大小 但它仅显示一次正确的大小 然后在滑块中显示大图像 这是该网站的链接 Website
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 使用流体网格系统在引导程序上对齐输入

    我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

随机推荐

  • NorthPolarStereo 的中心经度

    我想绘制北半球的极地立体图 底部为 180 这样我就可以强调太平洋地区 我正在使用 git 的最新 cartopy 并且可以使极地立体图没有问题 但我不知道如何更改图底部的经度 我尝试将经度范围设置为 180 180 但这没有帮助 并且 N
  • 已超出“max_user_connections”资源

    我有一个 MySQL Express Angular NodeJS 应用程序 有时当我登录时 我的节点控制台中会出现以下错误 类型错误 无法读取未定义的属性 查询 错误发生在我的passport local js文件 这是行 connect
  • 部署Java EE应用程序后执行任务

    我有一个 Java EE 应用程序 它应该在部署后启动与外部系统的同步过程 我怎样才能实现这个要求呢 下面列出了在 JavaEE 应用程序中获取生命周期回调的几种流行方法 创建 javax servlet ServletContextLis
  • Java Swing - 将 JLabel 中的图像放置到第二个 JLabel 上/上方(地图、玩家指示器)

    我有一个带有 GridBagLayout 的 JFrame 窗口 有一个带有图标的 JLabel 它是一张地图 现在我需要在地图上方显示另一张图片 玩家位置指示器 可以吗 怎么样 非常感谢 子类化 JLabel 并重写 Paint 方法 p
  • Kubernetes:如何从一个环境变量引用另一个环境变量?

    I ve a Deployment我使用以下方法公开 POD ID 的对象向下API https kubernetes io docs tasks inject data application environment variable e
  • 有没有一个好方法来保存socket.io消息历史记录

    我想记录socket io消息历史记录 即两个用户交谈的内容 以供以后使用 是否有一些socket io内置函数可以实现这一点 或者如果没有 有什么好的方法来实现它 首先 您需要某种方法来识别具有唯一 ID 的用户 该 ID 在用户断开连接
  • Ria 服务将复杂对象作为参数传递给查询域服务方法

    我在使用 WCF RIA 服务时遇到一些困难 类似于中指定的问题这个线程 https stackoverflow com questions 2330085 cant pass collection class as parameter t
  • 在 C#4.0 中从字符串构建 Linq 查询 - 最佳实践

    目前 我正在使用 LinqKit Ms 动态查询示例从字符串动态构建 Linq 表达式 这很好用 LinqKit http www albahari com nutshell linqkit aspx http www albahari c
  • 在 Mac OS 上使用 OpenMP 和 C++11

    我正在尝试在我的 C 11 代码中使用一些 OpenMP 多线程功能 例如 pragma omp parallel for 当我尝试使用以下命令进行编译时 clang std c 11 stdlib libc fopenmp main cp
  • 使用 Django 的 ORM 加速批量插入?

    我计划使用 django 的 ORM 将从约 750 个文件 每个约 250MB 中获取的 10 亿条记录上传到数据库 目前每个文件需要大约 20 分钟来处理 我想知道是否有任何方法可以加速这个过程 我采取了以下措施 使用 transact
  • LINQ 语句比“foreach”循环更快吗?

    我正在编写一个网格渲染管理器 并认为将使用相同着色器的所有网格进行分组 然后在我处于该着色器通道中时渲染它们是一个好主意 我目前正在使用foreach循环 但想知道使用 LINQ 是否可以提高性能 为什么 LINQ 应该更快 它还在内部使用
  • 如何获取 ember 应用程序控制器中模板复选框的值

    我正在尝试查找控制器中是否选中了该复选框 这是我的模板 这是我的控制器 App Ember Application create App ApplicationController Ember Controller extend
  • PyQT 线程的最简单方法

    我在 PyQt 中有一个带有函数的 GUIaddImage image path 很容易想象 当需要将新图像添加到 QListWidget 中时会调用它 为了检测文件夹中的新图像 我使用threading Thread with watch
  • 如何使用 JSF 设置 HTTP 状态代码?

    我在 WebSphere Application Server 上使用 Apache Myfaces 2 2 我有一个 JSF 页面 它 测试 与文件系统和数据库的连接 当连接失败时 我想返回另一个HTTP状态代码 我怎样才能用 JSF 做
  • 按二级键对多维数组进行排序

    我有一个看起来像这样的数组 array 3 Fall Quarter 2012 gt array 2 20121018 gt array 1 agenda gt string 55 Fall 2012 Agenda 20121018 pdf
  • 无法让 ZClip 工作

    我知道它甚至在这个网站上也能工作 但只有当我通过 h1 元素触发它时 我需要通过图像 代表副本 触发它 但当我尝试时它根本不起作用 这是我的 JavaScript copyTxt click function alert Txt2Copy
  • 在 Java Card 上将 byte[] 转换为 Short[] 的快速方法

    我想在 Java 卡上优化 SHA 3 算法 我需要一种消耗更少内存的快速算法 可以轻松转换byte to short 或短 to byte 我当前的实现如下所示 private short byteToShort byte b int l
  • 表达 3.0 如何使用 app.locals.use 和 res.locals.use

    我在express3 0rc2上 如何使用app locals use 它还存在吗 和res locals use 我看到了这个https github com visionmedia express issues 1131 https g
  • 为什么 Range 有效,而 Cells 无效?

    我试图通过将一个范围内的值分配给另一个范围来将一些数据从一个工作簿移动到另一个工作簿中 当我使用正常的 Range 语法指定目标范围 Range A1 B2 时 我的代码可以工作 但是如果我尝试使用 Range Cells 语法 Range
  • 响应式视频播放器

    我需要一个使用 bootstrap 开发的响应式布局网站的视频播放器 这意味着当我重新调整屏幕大小或在不同尺寸的屏幕中查看页面时 播放器应该自动适合屏幕 我尝试过 jwplayer 和 flowplayer 但没有成功 http www l