youtube iframe播放器没有't在移动设备上自动切换低带宽的质量

youtube iframe player doesn't automatically switch quality in low bandwidth on mobile

本文关键字：带宽 播放器 iframe 移动 youtube      更新时间：2023-09-26

使用iOS 9.3，将链接条件设置为3g速度，在safari中的youtube iframe api中加载视频。

我希望iframe api能意识到它已经缓冲了很多，并尝试获得较低质量的流以保持视频播放的流畅性，就像它在本地youtube应用程序中所做的那样。

我是不是错过了一些显而易见的东西？我基本上是从youtube ios助手包装器中复制粘贴的，但它仍然试图以对连接速度来说太高的质量播放。

<!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函数。

每当视频播放质量发生变化时，就会触发onPlaybackQualityChange事件。例如，如果调用setPlaybackQuality(suggestedQuality)函数，则如果播放质量实际发生更改，则会触发此事件。您的应用程序应响应事件，并且不应假定调用setPlaybackQuality(suggestedQuality)函数时质量会自动更改。类似地，您的代码不应该假设播放质量只会因为显式调用setPlaybackQuality或任何其他允许您设置建议播放质量的函数而发生更改。

然后，我建议调用getAvailableQualityLevels()函数来确定视频的质量级别。例如，如果您的页面显示1280px乘720px的视频播放器，那么hd720质量的视频实际上会比hd1080质量的视频看起来更好。

检查这些相关SO线程：

  • YouTube iFrame API"；setPlaybackQuality"；或"；建议质量"；不工作

如果使用事件3（缓冲）而不是事件5（播放），则没有用户结结巴巴。一旦开始加载，质量就会发生变化。唯一奇怪的是，你还需要在PlayerReady上设置它不起作用。

function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd720');
    }
}
  • 设置jw播放器youtube视频播放质量

希望这能有所帮助！

相关文章：