- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们正在尝试为 video.js 播放器提供使用分辨率切换器插件 (https://github.com/kmoskwiak/videojs-resolution-switcher) 在不同视频比特率之间切换的能力。
这是一个演示页面,其中包含在 Flash 模式下运行 videojs 播放器的基本设置:jsbin (点击右上角的“在jsbin中编辑”查看实际代码)
该插件在 HTML5(DASH 和 HLS)流媒体中正常工作,但在 Flash 模式下失败。播放器将以默认比特率值(在本例中为“1080p”)开始播放,没有任何问题。当您实际切换比特率时会出现问题。如果您选择更改为不同的比特率,播放器将停止播放。没有浏览器控制台错误,播放器不会崩溃,只是卡住。似乎播放器甚至没有发送实际的 http 请求来获取新的视频源。有时插件甚至可以真正切换源,但它只是发生了几次,而且是随机的。换句话说,行为方式不稳定且 Not Acceptable 。
插件提供resolutionchange
更改分辨率时应触发的事件,但事实并非如此。只有 UI 更改可见。
我非常感谢有关如何解决此行为的任何帮助或想法!
也包括在这里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
<style>
.video-js { background-color: black; }
video { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.16.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.1.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.0/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.7.1/videojs-dash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" width="450" height="250"></video>
<script>
videojs('player', {
preload: 'auto',
autoplay: true,
techOrder: ["flash"],
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 1080,
dynamicLabel: true
}
}
}, function(){
handleReady(this);
});
var sources=[
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/1080p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"HQ",type:"rtmp/mp4",res:1080},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/720p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Medium",type:"rtmp/mp4",res:720},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/480p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Low",type:"rtmp/mp4",res:480}
];
function handleReady(player) {
window.player = player;
player.updateSrc(sources);
}
</script>
</body>
</html>
最佳答案
var player = videojs('video', {
controls: true,
muted: true,
width: 800,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
default: '< default_res >', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: false
}
}
},
function() {
player.updateSrc([ < sourcetags > ]);
player.on('resolutionchange', function(){
player.play();
console.info('Source changed to %s', player.src());
})
关于javascript - 在 Flash 模式下切换比特率后,VideoJS 分辨率切换器不会自动重新启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42356285/
我在一个网站上工作,我试图制作一个自定义主题播放列表来播放 YouTube 上托管的视频。我已经在网站的另一部分成功地一起使用了 VideoJS 和 VideoJS-YouTube,但是在引入 Vid
我有一个使用 symfony 的项目,我使用 encoreJS 作为前端。实际上我制作了一个视频列表播放器并且工作正常。但我想使用 videojs-playlist-ui 来制作 example 但是
我发现了videojs播放列表的各种插件。有些需要修改才能与最新版本一起运行。我还发现了可以运行youtube视频的插件。 我需要知道,是否可以同时运行两个插件。就像我想通过同一播放器运行音频,视频和
我正在使用一个允许我在 video-js 中显示广告的插件。 https://github.com/dirkjanm/videojs-preroll/blob/master/lib/videojs.a
我现在想出了这个解决方案: var myPlayer1 = _V_("ID1"); var myPlayer2 = _V_("ID2"); ... ... va
我正在尝试(已经几天)完成非常简单的任务:构建一个 javascript 文件,捆绑所有必要的部分以使用 Google IMA 广告播放视频,但我仍然面临一些错误(主要是 player.ads not
本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码,供大家参考,具体内容如下 这个引用了videojs和swiper。实现效果类似淘宝商品详情中的轮播图,首张轮播为视
我正在使用 VideoJs(使用 HTML5 播放器)播放来自 DASH 或 HLS 源的实时内容。 我想知道实际播放内容与实际直播内容相差多少。 我该怎么做? 有一个 player.currentT
我已经设置了 videojs 播放器并获得了一个 HLS 流以通过 OBS 传输到播放器。当 OBS 正在运行并将视频发送到流时,播放器上会出现播放按钮,它看起来很正常,但是当没有任何内容流式传输到页
我使用videojs插件自定义视频播放器。 我有30个模态,每个模态(Youtube,Dailymotion,Vimeo)中都有一个不同的视频。 我添加了两个按钮next / prev,以在每个模式之
我正在其他域的iframe中从https://github.com/videojs/videojs-youtube加载/videojs-youtube/examples/simple.html示例页面
我对手动(单击按钮)使用videojs使用相同的html video标签(如果可能)触发播放不同的youtube url感兴趣。 我看到了这段代码,这使我希望这是可行的:http://jsfiddle
由于 JWPlayer 可笑的定价政策,我转向了 VideoJS。 问题是,当用户在 iOS 上启动视频时,它会切换 native 全屏。我希望控制面板在全屏模式下可用,但我还无法管理它。 代码:
我有最新的videojs(版本:7.6.6)。 是否可以使进度条可拖动? 当前状态:当我在进度条上移动鼠标时,第一件事是播放器等待下载几帧,然后移动。 想要:我可以将鼠标(单击状态 = mouseDo
我希望动态更改我的 VideoJS 播放器的视频源。我尝试了一种直接通过 DOM 更改源的方法,它确实改变了它,但播放器需要重新加载。所以看这里的官方API:http://docs.videojs.c
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
所以我制作了一个脚本来在播放器之外显示当前时间,一切正常。问题是它以微秒为单位渲染,我想将其显示为 H:MM:SS 这是代码,以便您可以理解我在说什么: HTML T
我想制作一个播放列表,视频源和海报是动态加载的。这是我的代码 var myFunc = function(){ var myPlayer = this; var xmlhttp; xmlhttp =
我正在使用 VideoJS 播放文件服务器提供的视频。这些文件是 mp4 格式,并且在任何桌面浏览器上都可以正常工作(使用 Flash 后备)。但是,它们在移动设备上根本不起作用。作为引用,请随时查看
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
我是一名优秀的程序员,十分优秀!