Ily*_*oka 7 javascript flash video.js
我们尝试使用分辨率切换器插件(https://github.com/kmoskwiak/videojs-resolution-switcher)为video.js播放器提供在不同视频比特率之间切换的功能.
这是一个演示页面,其中包含在flash模式下运行videojs player的基本设置:jsbin(点击右上方的 'jsbin编辑,查看实际代码)
该插件在HTML5(DASH和HLS)流中正常工作,但在Flash模式下失败.播放器将开始播放默认比特率值(在这种情况下为"1080p"),没有任何问题.实际切换比特率时会出现问题.如果您选择更改为其他比特率,则播放器将停止播放.没有浏览器控制台错误,玩家不会崩溃,只是冻结.似乎播放器甚至没有发送实际的http请求来获取新的视频源.有时插件甚至可以实际切换源,但它只发生了几次并随机发生.换句话说,行为是不稳定的,不可接受.
插件提供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>
小智 0
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());
})
| 归档时间： |
|
| 查看次数： |
1463 次 |
| 最近记录： |