youtube iframe播放器不会在移动设备上以低带宽自动切换质量 [英] youtube iframe player doesn't automatically switch quality in low bandwidth on mobile
问题描述
使用iOS 9.3，链接条件设置为3g速度，在Safari中加载youtube iframe api中的视频。
Using iOS 9.3, link conditioning set to 3g speed, loading a video in the youtube iframe api in safari.
我希望iframe api能够实现它一直在缓冲一堆，并试图获得一个较低质量的流，以保持视频播放流畅，就像在原生YouTube应用程序中一样。
I would expect the iframe api to realize that it has been buffering a bunch and try to get a lower quality stream to keep the video playback smooth, like it does in the native youtube app.
我错过了一些明显的东西吗？我基本上复制并粘贴了youtube ios帮助包装器，但它仍然试图以高于连接速度的质量播放。
Am I missing something obvious? I basically copied and pasted out of the youtube ios helper wrapper but it still tries to play in a quality that is too high for the connection speed.
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width:100%; height:100%; background-color:#000000; }
html { width:100%; height:100%; background-color:#000000; }
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
</head>
<body>
<div class="embed-container">
<div id="player"></div>
</div>
<script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
<script>
var player;
var error = false;
YT.ready(function() {
player = new YT.Player('player', {
"events" : {
"onPlaybackQualityChange" : "onPlaybackQualityChange",
"onReady" : "onReady",
"onError" : "onPlayerError",
"onStateChange" : "onStateChange"
},
"width" : "100%",
"height" : "100%",
"videoId" : 'NP7nK2zPirc',
"playerVars" : {
"showinfo" : 0,
"modestbranding" : 1,
"autohide" : 1,
"playsinline" : 1,
"controls" : 0
}
});
player.setSize(window.innerWidth, window.innerHeight);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
// this will transmit playTime frequently while playng
function getCurrentTime() {
var state = player.getPlayerState();
if (state == YT.PlayerState.PLAYING) {
time = player.getCurrentTime()
// window.location.href = 'ytplayer://onPlayTime?data=' + time;
}
}
window.setInterval(getCurrentTime, 500);
});
function onReady(event) {
// window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
if (!error) {
// window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
else {
error = false;
}
}
function onPlaybackQualityChange(event) {
// window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
if (event.data == 100) {
error = true;
}
// window.location.href = 'ytplayer://onError?data=' + event.data;
}
window.onresize = function() {
player.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
推荐答案
基于此文档，如果播放质量发生变化， onPlaybackQualityChange 事件将触发，您的代码应该响应事件而不是它调用 setPlaybackQuality function。
Based from this documentation, if the playback quality changes, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function.
onPlaybackQualityChange只要视频播放质量发生变化，就会触发事件。例如，如果您致电setPlaybackQuality（suggestQuality）功能，如果播放质量实际发生变化，则会触发此事件。您的应用应该响应该事件，并且不应该认为质量会在 <$ c时自动更改调用$ c> setPlaybackQuality（suggestedQuality） 函数。同样，您的代码不应该假设播放质量只会因显式调用setPlaybackQuality或任何其他允许您设置建议播放质量的函数而改变。
onPlaybackQualityChangeevent fires whenever the video playback quality changes. For example, if you call thesetPlaybackQuality(suggestedQuality)function, this event will fire if the playback quality actually changes. Your application should respond to the event and should not assume that the quality will automatically change when thesetPlaybackQuality(suggestedQuality)function is called. Similarly, your code should not assume that playback quality will only change as a result of an explicit call to setPlaybackQuality or any other function that allows you to set a suggested playback quality.
然后我建议调用 getAvailableQualityLevels（）函数来确定视频可用的质量级别。例如，如果您的页面显示1280像素x 720 xx视频播放器，那么<code> hd720 质量视频实际上看起来会比 hd1080 优质视频。
Then I recommend calling the getAvailableQualityLevels() function to determine which quality levels are available for a video. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video.
检查这些相关的SO主题：
Check these related SO threads:
- YouTube iFrame API "setPlaybackQuality" or "suggestedQuality" not working
如果使用事件3（缓冲）而不是事件5（播放） ）用户没有
口吃。质量一旦开始加载就会改变。
只有奇怪的是你需要在onPlayerReady中设置它，或者
不起作用。
If you use event 3 (buffering) instead of event 5 (playing) there's no stutter for the user. Quality is changed as soon as it starts loading. Only weird thing is you need to set it in onPlayerReady as well or it doesn't work.
function onPlayerReady(event) {
event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd720');
}
}
- 设置jw播放器youtube视频播放质量
- Set jw player youtube video playback quality
希望这会有所帮助！
这篇关于youtube iframe播放器不会在移动设备上以低带宽自动切换质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
