when i change quality it doesnt work and always get one quality , i want to change quality dynamically …. this is my code..
<code><!DOCTYPE html>
<html>
<head>
<title>YouTube API Example</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'yOYF4VtXXP8', // Replace with your video ID
playerVars: {
'autoplay': 0,
'controls': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function changeQuality(quality) {
player.setPlaybackQuality(quality);
var currentQuality = player.getPlaybackQuality();
console.log("Current quality: " + currentQuality);
}
</script>
</head>
<body>
<div id="player"></div>
<button onclick="changeQuality('small')">Low Quality</button>
<button onclick="changeQuality('medium')">Medium Quality</button>
<button onclick="changeQuality('large')">High Quality</button>
<button onclick="changeQuality('hd720')">HD 720p</button>
<button onclick="changeQuality('hd1080')">HD 1080p</button>
<button onclick="changeQuality('highres')">High Resolution</button>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html>
<head>
<title>YouTube API Example</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'yOYF4VtXXP8', // Replace with your video ID
playerVars: {
'autoplay': 0,
'controls': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function changeQuality(quality) {
player.setPlaybackQuality(quality);
var currentQuality = player.getPlaybackQuality();
console.log("Current quality: " + currentQuality);
}
</script>
</head>
<body>
<div id="player"></div>
<button onclick="changeQuality('small')">Low Quality</button>
<button onclick="changeQuality('medium')">Medium Quality</button>
<button onclick="changeQuality('large')">High Quality</button>
<button onclick="changeQuality('hd720')">HD 720p</button>
<button onclick="changeQuality('hd1080')">HD 1080p</button>
<button onclick="changeQuality('highres')">High Resolution</button>
</body>
</html>
</code>
<!DOCTYPE html>
<html>
<head>
<title>YouTube API Example</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'yOYF4VtXXP8', // Replace with your video ID
playerVars: {
'autoplay': 0,
'controls': 1,
'rel': 0,
'showinfo': 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function changeQuality(quality) {
player.setPlaybackQuality(quality);
var currentQuality = player.getPlaybackQuality();
console.log("Current quality: " + currentQuality);
}
</script>
</head>
<body>
<div id="player"></div>
<button onclick="changeQuality('small')">Low Quality</button>
<button onclick="changeQuality('medium')">Medium Quality</button>
<button onclick="changeQuality('large')">High Quality</button>
<button onclick="changeQuality('hd720')">HD 720p</button>
<button onclick="changeQuality('hd1080')">HD 1080p</button>
<button onclick="changeQuality('highres')">High Resolution</button>
</body>
</html>
i tried many times , but no use. video starts with tiny quality ,when i click any button i get tiny quaity
New contributor
EmadNour is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.