IFrame player API আপনাকে আপনার ওয়েবসাইটে একটি YouTube ভিডিও প্লেয়ার এম্বেড করতে এবং JavaScript ব্যবহার করে প্লেয়ারটিকে নিয়ন্ত্রণ করতে দেয়।
API এর জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে, আপনি প্লেব্যাকের জন্য ভিডিওগুলি সারিবদ্ধ করতে পারেন; সেই ভিডিওগুলি চালান, বিরতি দিন বা বন্ধ করুন; প্লেয়ার ভলিউম সামঞ্জস্য করুন; অথবা ভিডিও চালানোর বিষয়ে তথ্য পুনরুদ্ধার করুন। আপনি ইভেন্ট শ্রোতাদেরও যোগ করতে পারেন যা প্লেয়ার স্টেট পরিবর্তনের মতো নির্দিষ্ট প্লেয়ার ইভেন্টের প্রতিক্রিয়া হিসাবে কার্যকর করবে।
এই নির্দেশিকা ব্যাখ্যা করে কিভাবে IFrame API ব্যবহার করতে হয়। এটি API পাঠাতে পারে এমন বিভিন্ন ধরণের ইভেন্ট সনাক্ত করে এবং সেই ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে ইভেন্ট শ্রোতাদের কীভাবে লিখতে হয় তা ব্যাখ্যা করে। এটি বিভিন্ন জাভাস্ক্রিপ্ট ফাংশনগুলির বিবরণ দেয় যা আপনি ভিডিও প্লেয়ারকে নিয়ন্ত্রণ করতে কল করতে পারেন সেইসাথে প্লেয়ার প্যারামিটারগুলিকে আপনি প্লেয়ারকে আরও কাস্টমাইজ করতে ব্যবহার করতে পারেন৷
প্রয়োজনীয়তা
ব্যবহারকারীর ব্রাউজারকে অবশ্যই HTML5 postMessage
বৈশিষ্ট্য সমর্থন করতে হবে। বেশিরভাগ আধুনিক ব্রাউজার postMessage
সমর্থন করে।
Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
IFrame API ব্যবহার করে এমন যেকোনো ওয়েব পেজকে অবশ্যই নিম্নলিখিত জাভাস্ক্রিপ্ট ফাংশন প্রয়োগ করতে হবে:
onYouTubeIframeAPIReady
– প্লেয়ার API-এর জন্য পৃষ্ঠাটি জাভাস্ক্রিপ্ট ডাউনলোড করা শেষ হলে API এই ফাংশনটিকে কল করবে, যা আপনাকে আপনার পৃষ্ঠায় API ব্যবহার করতে সক্ষম করে। সুতরাং, এই ফাংশনটি প্লেয়ার অবজেক্ট তৈরি করতে পারে যা আপনি পৃষ্ঠা লোড হওয়ার সময় প্রদর্শন করতে চান।
শুরু হচ্ছে
নীচের নমুনা HTML পৃষ্ঠাটি একটি এমবেডেড প্লেয়ার তৈরি করে যা একটি ভিডিও লোড করবে, এটি ছয় সেকেন্ডের জন্য চালাবে এবং তারপর প্লেব্যাক বন্ধ করবে৷ HTML-এ সংখ্যাযুক্ত মন্তব্যগুলি উদাহরণের নীচের তালিকায় ব্যাখ্যা করা হয়েছে।
<!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
নিম্নলিখিত তালিকাটি উপরের নমুনা সম্পর্কে আরও বিশদ প্রদান করে:
এই বিভাগে
<div>
ট্যাগটি পৃষ্ঠার অবস্থান চিহ্নিত করে যেখানে IFrame API ভিডিও প্লেয়ার রাখবে। প্লেয়ার অবজেক্টের কনস্ট্রাক্টর, যা একটি ভিডিও প্লেয়ার লোড করা বিভাগে বর্ণিত হয়েছে, সেটিরid
দ্বারা<div>
ট্যাগ সনাক্ত করে যাতে API সঠিক অবস্থানে<iframe>
স্থাপন করে। বিশেষভাবে, IFrame API<div>
ট্যাগকে<iframe>
ট্যাগের সাথে প্রতিস্থাপন করবে।একটি বিকল্প হিসাবে, আপনি
<iframe>
উপাদানটি সরাসরি পৃষ্ঠায় রাখতে পারেন। একটি ভিডিও প্লেয়ার লোড করা বিভাগটি ব্যাখ্যা করে কিভাবে এটি করতে হয়।এই বিভাগের কোডটি IFrame Player API JavaScript কোড লোড করে। কোডটি অ্যাসিঙ্ক্রোনাসভাবে পুনরুদ্ধার করা হয়েছে তা নিশ্চিত করতে উদাহরণটি API কোড ডাউনলোড করতে DOM পরিবর্তন ব্যবহার করে। (
<script>
ট্যাগেরasync
অ্যাট্রিবিউট, যা অ্যাসিঙ্ক্রোনাস ডাউনলোডগুলিও সক্ষম করে, এই স্ট্যাক ওভারফ্লো উত্তরে আলোচনা করা সমস্ত আধুনিক ব্রাউজারে এখনও সমর্থিত নয়।প্লেয়ার API কোড ডাউনলোড হওয়ার সাথে সাথে
onYouTubeIframeAPIReady
ফাংশনটি কার্যকর হবে। কোডের এই অংশটি একটি গ্লোবাল ভেরিয়েবল,player
সংজ্ঞায়িত করে, যা আপনি যে ভিডিও প্লেয়ারটি এম্বেড করছেন তা বোঝায় এবং ফাংশনটি তারপর ভিডিও প্লেয়ার অবজেক্ট তৈরি করে।onPlayerReady
ফাংশনটি কার্যকর হবে যখনonReady
ইভেন্টটি চালু হবে। এই উদাহরণে, ফাংশনটি নির্দেশ করে যে ভিডিও প্লেয়ার প্রস্তুত হলে, এটি চালানো শুরু করা উচিত।প্লেয়ারের অবস্থা পরিবর্তিত হলে API
onPlayerStateChange
ফাংশনকে কল করবে, যা ইঙ্গিত করতে পারে যে প্লেয়ারটি খেলছে, বিরতি দিয়েছে, শেষ হয়েছে ইত্যাদি। ফাংশনটি নির্দেশ করে যে প্লেয়ার স্টেট1
(বাজানো) হলে, প্লেয়ারটিকে ছয় সেকেন্ডের জন্য খেলতে হবে এবং তারপর ভিডিও বন্ধ করতেstopVideo
ফাংশনটি কল করতে হবে।
একটি ভিডিও প্লেয়ার লোড হচ্ছে
API-এর JavaScript কোড লোড হওয়ার পরে, API onYouTubeIframeAPIReady
ফাংশনকে কল করবে, যেখানে আপনি আপনার পৃষ্ঠায় একটি ভিডিও প্লেয়ার সন্নিবেশ করার জন্য একটি YT.Player
অবজেক্ট তৈরি করতে পারেন। নীচের HTML অংশটি উপরের উদাহরণ থেকে onYouTubeIframeAPIReady
ফাংশন দেখায়:
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
ভিডিও প্লেয়ারের কনস্ট্রাক্টর নিম্নলিখিত পরামিতিগুলি নির্দিষ্ট করে:
প্রথম প্যারামিটারটি হয় DOM উপাদান বা HTML উপাদানের
id
নির্দিষ্ট করে যেখানে API প্লেয়ার ধারণকারী<iframe>
ট্যাগ সন্নিবেশ করবে।IFrame API নির্দিষ্ট উপাদানটিকে প্লেয়ার ধারণকারী
<iframe>
উপাদান দিয়ে প্রতিস্থাপন করবে। এটি আপনার পৃষ্ঠার লেআউটকে প্রভাবিত করতে পারে যদি প্রতিস্থাপিত উপাদানটির সন্নিবেশ করা<iframe>
উপাদানের চেয়ে ভিন্ন প্রদর্শন শৈলী থাকে। ডিফল্টরূপে, একটি<iframe>
একটিinline-block
উপাদান হিসাবে প্রদর্শিত হয়।- দ্বিতীয় প্যারামিটারটি এমন একটি বস্তু যা প্লেয়ারের বিকল্পগুলি নির্দিষ্ট করে। বস্তুটিতে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
-
width
(সংখ্যা) - ভিডিও প্লেয়ারের প্রস্থ। ডিফল্ট মান হল640
। -
height
(সংখ্যা) - ভিডিও প্লেয়ারের উচ্চতা। ডিফল্ট মান হল390
। -
videoId
(স্ট্রিং) - YouTube ভিডিও আইডি যা প্লেয়ারটি লোড করা ভিডিওটি সনাক্ত করে। -
playerVars
(অবজেক্ট) - অবজেক্টের বৈশিষ্ট্যগুলি প্লেয়ার প্যারামিটারগুলি সনাক্ত করে যা প্লেয়ারকে কাস্টমাইজ করতে ব্যবহার করা যেতে পারে। -
events
(অবজেক্ট) - বস্তুর বৈশিষ্ট্যগুলি সেই ইভেন্টগুলি সনাক্ত করে যেগুলি API ফায়ার করে এবং ফাংশনগুলি (ইভেন্ট লিসেনার) যেগুলিকে এপিআই কল করবে যখন সেই ঘটনাগুলি ঘটে। উদাহরণে, কনস্ট্রাক্টর নির্দেশ করে যেonPlayerReady
ফাংশনটি কার্যকর হবে যখনonReady
ইভেন্ট ফায়ার হবে এবংonPlayerStateChange
ফাংশনটি কার্যকর হবে যখনonStateChange
ইভেন্ট ফায়ার হবে।
-
শুরু করা বিভাগে উল্লিখিত হিসাবে, আপনার পৃষ্ঠায় একটি খালি <div>
উপাদান লেখার পরিবর্তে, যা প্লেয়ার API-এর জাভাস্ক্রিপ্ট কোড তারপর একটি <iframe>
উপাদান দিয়ে প্রতিস্থাপন করবে, আপনি নিজেই <iframe>
ট্যাগ তৈরি করতে পারেন। উদাহরণ বিভাগে প্রথম উদাহরণটি দেখায় কিভাবে এটি করতে হয়।
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>
মনে রাখবেন যে আপনি যদি <iframe>
ট্যাগটি লেখেন, তাহলে আপনি YT.Player
অবজেক্ট তৈরি করার সময়, আপনাকে width
এবং height
মান নির্দিষ্ট করতে হবে না, যেগুলি <iframe>
ট্যাগ বা videoId
এর বৈশিষ্ট্য হিসাবে নির্দিষ্ট করা হয়েছে। এবং প্লেয়ার প্যারামিটার, যা src
URL-এ নির্দিষ্ট করা আছে। অতিরিক্ত নিরাপত্তা পরিমাপ হিসাবে, আপনাকে URL-এ origin
প্যারামিটার অন্তর্ভুক্ত করতে হবে, URL স্কিম ( http://
বা https://
) এবং প্যারামিটার মান হিসাবে আপনার হোস্ট পৃষ্ঠার সম্পূর্ণ ডোমেন নির্দিষ্ট করে৷ যদিও origin
ঐচ্ছিক, এটি সহ এটি ক্ষতিকারক তৃতীয় পক্ষের জাভাস্ক্রিপ্ট আপনার পৃষ্ঠায় ইনজেক্ট করা এবং আপনার YouTube প্লেয়ারের নিয়ন্ত্রণ হাইজ্যাক করা থেকে রক্ষা করে৷
ভিডিও প্লেয়ার অবজেক্ট নির্মাণের অন্যান্য উদাহরণের জন্য, উদাহরণ দেখুন।
অপারেশন
প্লেয়ার এপিআই পদ্ধতিতে কল করার জন্য, আপনাকে প্রথমে প্লেয়ার অবজেক্টের একটি রেফারেন্স পেতে হবে যা আপনি নিয়ন্ত্রণ করতে চান। এই ডকুমেন্টের শুরু করা এবং একটি ভিডিও প্লেয়ার লোড করা বিভাগে আলোচনা করা হিসাবে আপনি একটি YT.Player
অবজেক্ট তৈরি করে রেফারেন্স পাবেন৷
ফাংশন
সারিবদ্ধ ফাংশন
সারিবদ্ধ ফাংশনগুলি আপনাকে একটি ভিডিও, একটি প্লেলিস্ট বা ভিডিওগুলির অন্য একটি তালিকা লোড এবং প্লে করতে দেয়৷ আপনি যদি এই ফাংশনগুলিকে কল করার জন্য নীচে বর্ণিত অবজেক্ট সিনট্যাক্স ব্যবহার করেন, তাহলে আপনি ব্যবহারকারীর আপলোড করা ভিডিওগুলির একটি তালিকা সারিতে বা লোড করতে পারেন৷
API সারিবদ্ধ ফাংশন কল করার জন্য দুটি ভিন্ন বাক্য গঠন সমর্থন করে।
আর্গুমেন্ট সিনট্যাক্সের জন্য ফাংশন আর্গুমেন্ট একটি নির্ধারিত ক্রমে তালিকাভুক্ত করা প্রয়োজন।
অবজেক্ট সিনট্যাক্স আপনাকে একটি বস্তুকে একক প্যারামিটার হিসাবে পাস করতে দেয় এবং আপনি যে ফাংশন আর্গুমেন্ট সেট করতে চান তার জন্য অবজেক্টের বৈশিষ্ট্য নির্ধারণ করতে দেয়। উপরন্তু, API অতিরিক্ত কার্যকারিতা সমর্থন করতে পারে যা আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না।
উদাহরণস্বরূপ, loadVideoById
ফাংশনটি নিম্নলিখিত যে কোনও উপায়ে কল করা যেতে পারে। মনে রাখবেন যে অবজেক্ট সিনট্যাক্স endSeconds
বৈশিষ্ট্য সমর্থন করে, যা আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না।
আর্গুমেন্ট সিনট্যাক্স
loadVideoById("bHQqvYy5KYo", 5, "large")
অবজেক্ট সিনট্যাক্স
loadVideoById({'videoId': 'bHQqvYy5KYo', 'startSeconds': 5, 'endSeconds': 60});
ভিডিওর জন্য সারিবদ্ধ ফাংশন
-
cueVideoById
আর্গুমেন্ট সিনট্যাক্স
player.cueVideoById(videoId:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.cueVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওর থাম্বনেইল লোড করে এবং প্লেয়ারকে ভিডিও চালানোর জন্য প্রস্তুত করে।
playVideo()
বাseekTo()
কল না করা পর্যন্ত প্লেয়ার FLV-এর অনুরোধ করে না।- প্রয়োজনীয়
videoId
প্যারামিটারটি প্লে করা ভিডিওটির YouTube ভিডিও আইডি নির্দিষ্ট করে৷ YouTube Data API-এ, একটিvideo
রিসোর্সেরid
প্রপার্টি আইডি নির্দিষ্ট করে। - ঐচ্ছিক
startSeconds
প্যারামিটার একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
কল করার সময় ভিডিওটি যে সময় থেকে প্লে শুরু হবে তা নির্দিষ্ট করে। আপনি যদি একটিstartSeconds
মান নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন, তাহলে প্লেয়ারটিseekTo()
কলে নির্দিষ্ট সময় থেকে খেলবে। যখন ভিডিও cued এবং প্লে করার জন্য প্রস্তুত, প্লেয়ার একটিvideo cued
ঘটনা সম্প্রচার করবে (5
)। - ঐচ্ছিক
endSeconds
প্যারামিটার, যা শুধুমাত্র অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
কল করার সময় ভিডিওটি কখন চালানো বন্ধ করা উচিত তা নির্দিষ্ট করে। যদি আপনি একটিendSeconds
মান নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন,endSeconds
মান আর কার্যকর হবে না।
loadVideoById
আর্গুমেন্ট সিনট্যাক্স
player.loadVideoById(videoId:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিও লোড করে এবং প্লে করে।
- প্রয়োজনীয়
videoId
প্যারামিটারটি প্লে করা ভিডিওটির YouTube ভিডিও আইডি নির্দিষ্ট করে৷ YouTube Data API-এ, একটিvideo
রিসোর্সেরid
প্রপার্টি আইডি নির্দিষ্ট করে। - ঐচ্ছিক
startSeconds
প্যারামিটার একটি float/integer গ্রহণ করে। যদি এটি নির্দিষ্ট করা হয়, তাহলে ভিডিওটি নিকটতম কীফ্রেম থেকে নির্দিষ্ট সময়ে শুরু হবে। - ঐচ্ছিক
endSeconds
প্যারামিটার একটি float/integer গ্রহণ করে। যদি এটি নির্দিষ্ট করা হয়, তাহলে ভিডিওটি নির্দিষ্ট সময়ে চালানো বন্ধ হয়ে যাবে।
cueVideoByUrl
আর্গুমেন্ট সিনট্যাক্স
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.cueVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওর থাম্বনেইল লোড করে এবং প্লেয়ারকে ভিডিও চালানোর জন্য প্রস্তুত করে।
playVideo()
বাseekTo()
কল না করা পর্যন্ত প্লেয়ার FLV-এর অনুরোধ করে না।- প্রয়োজনীয়
mediaContentUrl
প্যারামিটারhttp://www.youtube.com/v/VIDEO_ID?version=3
ফর্ম্যাটে একটি সম্পূর্ণ যোগ্য YouTube প্লেয়ার URL নির্দিষ্ট করে। - ঐচ্ছিক
startSeconds
প্যারামিটার একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
কল করার সময় ভিডিওটি যে সময় থেকে প্লে শুরু হবে তা নির্দিষ্ট করে। যদি আপনিstartSeconds
নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন, তাহলে প্লেয়ারটিseekTo()
কলে নির্দিষ্ট সময় থেকে খেলবে। যখন ভিডিও cued এবং প্লে করার জন্য প্রস্তুত, প্লেয়ার একটিvideo cued
ইভেন্ট (5) সম্প্রচার করবে। - ঐচ্ছিক
endSeconds
প্যারামিটার, যা শুধুমাত্র অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
কল করার সময় ভিডিওটি কখন চালানো বন্ধ করা উচিত তা নির্দিষ্ট করে। যদি আপনি একটিendSeconds
মান নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন,endSeconds
মান আর কার্যকর হবে না।
loadVideoByUrl
আর্গুমেন্ট সিনট্যাক্স
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.loadVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিও লোড করে এবং প্লে করে।
- প্রয়োজনীয়
mediaContentUrl
প্যারামিটারhttp://www.youtube.com/v/VIDEO_ID?version=3
ফর্ম্যাটে একটি সম্পূর্ণ যোগ্য YouTube প্লেয়ার URL নির্দিষ্ট করে। - ঐচ্ছিক
startSeconds
প্যারামিটার একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবং যে সময় থেকে ভিডিওটি চালানো শুরু করা উচিত তা নির্দিষ্ট করে৷ যদিstartSeconds
(সংখ্যা একটি ফ্লোট হতে পারে) নির্দিষ্ট করা হয়, তাহলে ভিডিওটি নিকটতম কীফ্রেম থেকে নির্দিষ্ট সময়ে শুরু হবে। - ঐচ্ছিক
endSeconds
প্যারামিটার, যা শুধুমাত্র অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবং ভিডিওটি কখন চালানো বন্ধ করা উচিত তা নির্দিষ্ট করে।
তালিকার জন্য সারিবদ্ধ ফাংশন
cuePlaylist
এবং loadPlaylist
ফাংশনগুলি আপনাকে একটি প্লেলিস্ট লোড এবং প্লে করার অনুমতি দেয়। আপনি যদি এই ফাংশনগুলিকে কল করার জন্য অবজেক্ট সিনট্যাক্স ব্যবহার করেন তবে আপনি ব্যবহারকারীর আপলোড করা ভিডিওগুলির একটি তালিকা সারিবদ্ধ (বা লোড) করতে পারেন৷
যেহেতু ফাংশনগুলি আর্গুমেন্ট সিনট্যাক্স বা অবজেক্ট সিনট্যাক্স ব্যবহার করে কল করা হয়েছে তার উপর নির্ভর করে ভিন্নভাবে কাজ করে, উভয় কলিং পদ্ধতি নীচে নথিভুক্ত করা হয়েছে।
-
cuePlaylist
আর্গুমেন্ট সিনট্যাক্স
নির্দিষ্ট প্লেলিস্ট সারিবদ্ধ করে। যখন প্লেলিস্ট cued এবং প্লে করার জন্য প্রস্তুত, প্লেয়ার একটিplayer.cuePlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
video cued
ঘটনা সম্প্রচার করবে (5
)।প্রয়োজনীয়
playlist
প্যারামিটার YouTube ভিডিও আইডিগুলির একটি অ্যারে নির্দিষ্ট করে৷ YouTube Data API-এ,video
রিসোর্সেরid
প্রপার্টি সেই ভিডিওটির আইডি শনাক্ত করে।ঐচ্ছিক
index
প্যারামিটার প্লেলিস্টের প্রথম ভিডিওর সূচী নির্দিষ্ট করে যা প্লে হবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান হল0
, তাই ডিফল্ট আচরণ হল প্লেলিস্টের প্রথম ভিডিও লোড করা এবং প্লে করা৷ঐচ্ছিক
startSeconds
প্যারামিটারটি একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
ফাংশনটি কল করার সময় প্লেলিস্টের প্রথম ভিডিওটি প্লে শুরু করার সময় নির্দিষ্ট করে৷ আপনি যদি একটিstartSeconds
মান নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন, তাহলে প্লেয়ারটিseekTo()
কলে নির্দিষ্ট সময় থেকে খেলবে। আপনি যদি একটি প্লেলিস্ট কিউ করেন এবং তারপরplayVideoAt()
ফাংশনটি কল করেন, প্লেয়ারটি নির্দিষ্ট ভিডিওর শুরুতে বাজানো শুরু করবে।
অবজেক্ট সিনট্যাক্স
ভিডিওর নির্দিষ্ট তালিকা সারিবদ্ধ করে। তালিকাটি একটি প্লেলিস্ট বা ব্যবহারকারীর আপলোড করা ভিডিও ফিড হতে পারে৷ সার্চ ফলাফলের একটি তালিকা সারিবদ্ধ করার ক্ষমতা বাতিল করা হয়েছে এবংplayer.cuePlaylist({listType:String, list:String, index:Number, startSeconds:Number}):Void
15 নভেম্বর 2020 থেকে আর সমর্থিত হবে না।যখন তালিকা cued এবং খেলার জন্য প্রস্তুত, প্লেয়ার একটি
video cued
ঘটনা সম্প্রচার করবে (5
)।ঐচ্ছিক
listType
সম্পত্তি আপনি যে ধরনের ফলাফল ফিড পুনরুদ্ধার করছেন তা নির্দিষ্ট করে। বৈধ মান হলplaylist
এবংuser_uploads
।15 নভেম্বর 2020 থেকে একটি অবচয়িত মান,search
আর সমর্থিত হবে না। ডিফল্ট মান হলplaylist
।প্রয়োজনীয়
list
বৈশিষ্ট্যে একটি কী রয়েছে যা YouTube-এর ফেরত দেওয়া ভিডিওগুলির নির্দিষ্ট তালিকা চিহ্নিত করে৷- যদি
listType
সম্পত্তির মানplaylist
হয়, তাহলেlist
বৈশিষ্ট্য প্লেলিস্ট আইডি বা ভিডিও আইডিগুলির একটি অ্যারে নির্দিষ্ট করে৷ YouTube ডেটা এপিআই-এ,playlist
রিসোর্সেরid
প্রপার্টি একটি প্লেলিস্টের আইডি শনাক্ত করে এবংvideo
রিসোর্সেরid
প্রোপার্টি একটি ভিডিও আইডি নির্দিষ্ট করে। - যদি
listType
সম্পত্তির মানuser_uploads
হয়, তাহলেlist
বৈশিষ্ট্য সেই ব্যবহারকারীকে চিহ্নিত করে যার আপলোড করা ভিডিওগুলি ফেরত দেওয়া হবে। - যদি
listType
সম্পত্তির মানsearch
হয়, তাহলেlist
বৈশিষ্ট্য অনুসন্ধান ক্যোয়ারী নির্দিষ্ট করে। দ্রষ্টব্য: এই কার্যকারিতা বাতিল করা হয়েছে এবং15 নভেম্বর 2020 থেকে আর সমর্থিত হবে না।
- যদি
ঐচ্ছিক
index
বৈশিষ্ট্য তালিকার প্রথম ভিডিওর সূচী নির্দিষ্ট করে যা প্লে হবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটারের মান হল0
, তাই ডিফল্ট আচরণ হল তালিকার প্রথম ভিডিওটি লোড করা এবং প্লে করা৷ঐচ্ছিক
startSeconds
বৈশিষ্ট্যটি একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
ফাংশনটি কল করার সময় তালিকার প্রথম ভিডিওটি প্লে শুরু করার সময় নির্দিষ্ট করে৷ আপনি যদি একটিstartSeconds
মান নির্দিষ্ট করেন এবং তারপরseekTo()
কল করেন, তাহলে প্লেয়ারটিseekTo()
কলে নির্দিষ্ট সময় থেকে খেলবে। আপনি যদি একটি তালিকা কিউ করেন এবং তারপরplayVideoAt()
ফাংশনটি কল করেন, প্লেয়ারটি নির্দিষ্ট ভিডিওর শুরুতে বাজানো শুরু করবে।
-
loadPlaylist
আর্গুমেন্ট সিনট্যাক্স
এই ফাংশনটি নির্দিষ্ট প্লেলিস্ট লোড করে এবং এটি চালায়।player.loadPlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
প্রয়োজনীয়
playlist
প্যারামিটার YouTube ভিডিও আইডিগুলির একটি অ্যারে নির্দিষ্ট করে৷ YouTube Data API-এ,video
রিসোর্সেরid
প্রপার্টি একটি ভিডিও আইডি নির্দিষ্ট করে।ঐচ্ছিক
index
প্যারামিটার প্লেলিস্টের প্রথম ভিডিওর সূচী নির্দিষ্ট করে যা প্লে হবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান হল0
, তাই ডিফল্ট আচরণ হল প্লেলিস্টের প্রথম ভিডিও লোড করা এবং প্লে করা৷ঐচ্ছিক
startSeconds
প্যারামিটার একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবং প্লেলিস্টের প্রথম ভিডিওটি যে সময় থেকে প্লে শুরু হবে তা নির্দিষ্ট করে৷
অবজেক্ট সিনট্যাক্স
এই ফাংশনটি নির্দিষ্ট তালিকা লোড করে এবং এটি চালায়। তালিকাটি একটি প্লেলিস্ট বা ব্যবহারকারীর আপলোড করা ভিডিও ফিড হতে পারে৷ সার্চ ফলাফলের একটি তালিকা লোড করার ক্ষমতা বাতিল করা হয়েছে এবংplayer.loadPlaylist({list:String, listType:String, index:Number, startSeconds:Number}):Void
15 নভেম্বর 2020 থেকে আর সমর্থিত হবে না।ঐচ্ছিক
listType
সম্পত্তি আপনি যে ধরনের ফলাফল ফিড পুনরুদ্ধার করছেন তা নির্দিষ্ট করে। বৈধ মান হলplaylist
এবংuser_uploads
।15 নভেম্বর 2020 থেকে একটি অবচয়িত মান,search
আর সমর্থিত হবে না। ডিফল্ট মান হলplaylist
।প্রয়োজনীয়
list
বৈশিষ্ট্যে একটি কী রয়েছে যা YouTube-এর ফেরত দেওয়া ভিডিওগুলির নির্দিষ্ট তালিকা চিহ্নিত করে৷- যদি
listType
সম্পত্তির মানplaylist
হয়, তাহলেlist
বৈশিষ্ট্য একটি প্লেলিস্ট আইডি বা ভিডিও আইডিগুলির একটি অ্যারে নির্দিষ্ট করে৷ YouTube ডেটা এপিআই-এ,playlist
রিসোর্সেরid
প্রপার্টি একটি প্লেলিস্টের আইডি নির্দিষ্ট করে এবংvideo
রিসোর্সেরid
প্রোপার্টি একটি ভিডিও আইডি নির্দিষ্ট করে। - যদি
listType
সম্পত্তির মানuser_uploads
হয়, তাহলেlist
বৈশিষ্ট্য সেই ব্যবহারকারীকে চিহ্নিত করে যার আপলোড করা ভিডিওগুলি ফেরত দেওয়া হবে। - যদি
listType
সম্পত্তির মানsearch
হয়, তাহলেlist
বৈশিষ্ট্য অনুসন্ধান ক্যোয়ারী নির্দিষ্ট করে। দ্রষ্টব্য: এই কার্যকারিতা বাতিল করা হয়েছে এবং15 নভেম্বর 2020 থেকে আর সমর্থিত হবে না।
- যদি
ঐচ্ছিক
index
বৈশিষ্ট্য তালিকার প্রথম ভিডিওর সূচী নির্দিষ্ট করে যা প্লে হবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটারের মান হল0
, তাই ডিফল্ট আচরণ হল তালিকার প্রথম ভিডিওটি লোড করা এবং প্লে করা৷ঐচ্ছিক
startSeconds
বৈশিষ্ট্য একটি ফ্লোট/পূর্ণসংখ্যা গ্রহণ করে এবং তালিকার প্রথম ভিডিওটি যে সময় থেকে প্লে শুরু হবে তা নির্দিষ্ট করে।
প্লেব্যাক নিয়ন্ত্রণ এবং প্লেয়ার সেটিংস
একটি ভিডিও চালানো হচ্ছে
-
player. playVideo ():Void
- বর্তমানে cued/লোড করা ভিডিও চালায়। এই ফাংশনটি চালানোর পরে চূড়ান্ত প্লেয়ার স্টেট
playing
হবে (1)।
দ্রষ্টব্য: একটি প্লেব্যাক শুধুমাত্র একটি ভিডিওর অফিসিয়াল ভিউ গণনার দিকে গণনা করা হয় যদি এটি প্লেয়ারে একটি নেটিভ প্লে বোতামের মাধ্যমে শুরু করা হয়।
-
player. pauseVideo ():Void
- বর্তমানে বাজানো ভিডিও পজ করে। এই ফাংশনটি চালানোর পরে চূড়ান্ত প্লেয়ার স্টেটটি
paused
হবে (2
) যদি না প্লেয়ারended
(0
) অবস্থায় থাকে যখন ফাংশনটি কল করা হয়, এই ক্ষেত্রে প্লেয়ার স্টেট পরিবর্তন হবে না।
-
player. stopVideo ():Void
- বর্তমান ভিডিও লোড করা বন্ধ করে এবং বাতিল করে। এই ফাংশনটি বিরল পরিস্থিতিতে সংরক্ষিত হওয়া উচিত যখন আপনি জানেন যে ব্যবহারকারী প্লেয়ারে অতিরিক্ত ভিডিও দেখবে না। আপনার উদ্দেশ্য যদি ভিডিওটি পজ করা হয়, তাহলে আপনাকে শুধুমাত্র
pauseVideo
ফাংশনটি কল করতে হবে। আপনি যদি প্লেয়ারটি যে ভিডিওটি চালাচ্ছে তা পরিবর্তন করতে চান, আপনি প্রথমেstopVideo
কল না করে সারিবদ্ধ ফাংশনগুলির একটিতে কল করতে পারেন৷
গুরুত্বপূর্ণ:pauseVideo
ফাংশনের বিপরীতে, যা প্লেয়ারকেpaused
(2
) অবস্থায় রেখে যায়,stopVideo
ফাংশন প্লেয়ারটিকেended
(0
),paused
(2
),video cued
(5
) সহ যেকোনও না-বাজানো অবস্থায় রাখতে পারেunstarted
(-1
)।
-
player. seekTo (seconds:Number, allowSeekAhead:Boolean):Void
- ভিডিওতে একটি নির্দিষ্ট সময় চেয়েছেন। ফাংশনটি কল করার সময় প্লেয়ারকে বিরতি দেওয়া হলে, এটি বিরতিযুক্ত থাকবে। যদি ফাংশনটি অন্য রাজ্য থেকে কল করা হয় (
playing
,video cued
, ইত্যাদি), প্লেয়ার ভিডিওটি চালাবে।seconds
প্যারামিটারটি খেলোয়াড়ের অগ্রসর হওয়ার সময় চিহ্নিত করে।প্লেয়ারটি সেই সময়ের আগে নিকটতম কীফ্রেমে অগ্রসর হবে যদি না প্লেয়ারটি ইতিমধ্যেই ভিডিওর অংশটি ডাউনলোড করে থাকে যা ব্যবহারকারী খুঁজছেন৷
seconds
প্যারামিটারটি বর্তমানে বাফার করা ভিডিও ডেটার বাইরে একটি সময় নির্দিষ্ট করলে প্লেয়ার সার্ভারে একটি নতুন অনুরোধ করবে কিনা তাallowSeekAhead
প্যারামিটার নির্ধারণ করে।আমরা সুপারিশ করি যে আপনি এই প্যারামিটারটিকে
false
সেট করুন যখন ব্যবহারকারী একটি ভিডিও অগ্রগতি দণ্ড বরাবর মাউস টেনে আনুন এবং তারপর ব্যবহারকারী মাউস ছেড়ে দিলে এটিtrue
সেট করুন৷ এই পদ্ধতিটি ব্যবহারকারীকে ভিডিওতে অতীতের আনবাফার পয়েন্টগুলি স্ক্রোল করে নতুন ভিডিও স্ট্রিমের অনুরোধ না করে একটি ভিডিওর বিভিন্ন পয়েন্টে স্ক্রোল করতে দেয়। যখন ব্যবহারকারী মাউস বোতামটি ছেড়ে দেয়, প্লেয়ারটি ভিডিওতে পছন্দসই পয়েন্টে অগ্রসর হয় এবং প্রয়োজনে একটি নতুন ভিডিও স্ট্রিমের অনুরোধ করে।
360° ভিডিওর প্লেব্যাক নিয়ন্ত্রণ করা
দ্রষ্টব্য: 360° ভিডিও প্লেব্যাকের অভিজ্ঞতা মোবাইল ডিভাইসে সীমিত সমর্থন করে। অসমর্থিত ডিভাইসগুলিতে, 360° ভিডিওগুলি বিকৃত দেখায় এবং API এর মাধ্যমে, ওরিয়েন্টেশন সেন্সর ব্যবহার করে বা ডিভাইসের স্ক্রিনে টাচ/ড্র্যাগ অ্যাকশনের প্রতিক্রিয়া সহ দেখার দৃষ্টিভঙ্গি পরিবর্তন করার কোনও সমর্থিত উপায় নেই৷
-
player. getSphericalProperties ():Object
- একটি ভিডিও প্লেব্যাকের জন্য দর্শকের বর্তমান দৃষ্টিভঙ্গি বা ভিউ বর্ণনা করে এমন বৈশিষ্ট্যগুলি পুনরুদ্ধার করে৷ উপরন্তু:
- এই বস্তুটি শুধুমাত্র 360° ভিডিওর জন্য জনবহুল, যাকে গোলাকার ভিডিওও বলা হয়।
- যদি বর্তমান ভিডিওটি একটি 360° ভিডিও না হয় বা যদি একটি অ-সমর্থিত ডিভাইস থেকে ফাংশনটি কল করা হয়, তাহলে ফাংশনটি একটি খালি বস্তু প্রদান করে।
- সমর্থিত মোবাইল ডিভাইসে, যদি
enableOrientationSensor
প্রপার্টিtrue
তে সেট করা থাকে, তাহলে এই ফাংশনটি এমন একটি অবজেক্ট রিটার্ন করে যেখানেfov
প্রপার্টি সঠিক মান ধারণ করে এবং অন্যান্য প্রপার্টি0
এ সেট করা থাকে।
বৈশিষ্ট্য yaw
পরিসরে একটি সংখ্যা [0, 360) যেটি ডিগ্রীতে দৃশ্যের অনুভূমিক কোণকে প্রতিনিধিত্ব করে, যা ব্যবহারকারী কতটা বাম বা ডান দিকে মুখ করতে ভিউকে ঘুরিয়ে দেয় তা প্রতিফলিত করে। নিরপেক্ষ অবস্থান, ভিডিওর কেন্দ্রের দিকে মুখ করে এর ইকুরেক্টাঙ্গুলার প্রজেকশনে, 0° প্রতিনিধিত্ব করে এবং দর্শক বাম দিকে ঘুরলে এই মান বৃদ্ধি পায়। pitch
পরিসরে একটি সংখ্যা [-90, 90] যা ডিগ্রীতে দৃশ্যের উল্লম্ব কোণকে প্রতিনিধিত্ব করে, যা ব্যবহারকারী কতটা উপরে বা নিচে দেখতে ভিউটিকে সামঞ্জস্য করে তা প্রতিফলিত করে। নিরপেক্ষ অবস্থান, ভিডিওর কেন্দ্রের দিকে মুখ করে এর নিরক্ষভুজাকার অভিক্ষেপ, 0° প্রতিনিধিত্ব করে, এবং দর্শকের দিকে তাকালে এই মান বৃদ্ধি পায়। roll
পরিসরের একটি সংখ্যা [-180, 180] যা ডিগ্রীতে দৃশ্যের ঘড়ির কাঁটার বা বিপরীত দিকে ঘূর্ণন কোণকে উপস্থাপন করে। নিরপেক্ষ অবস্থান, সমভুজাকার অভিক্ষেপে অনুভূমিক অক্ষটি দৃশ্যের অনুভূমিক অক্ষের সমান্তরাল, 0° প্রতিনিধিত্ব করে। ভিউ ঘড়ির কাঁটার দিকে ঘোরার সাথে সাথে মান বৃদ্ধি পায় এবং ভিউ ঘড়ির কাঁটার বিপরীতে ঘোরার সাথে সাথে হ্রাস পায়।
মনে রাখবেন যে এমবেড করা প্লেয়ারটি দৃশ্যের রোল সামঞ্জস্য করার জন্য একটি ব্যবহারকারী ইন্টারফেস উপস্থাপন করে না। এই পারস্পরিক একচেটিয়া উপায়ে রোলটি সামঞ্জস্য করা যেতে পারে:- দৃশ্যের জন্য রোল প্রদান করতে একটি মোবাইল ব্রাউজারে ওরিয়েন্টেশন সেন্সর ব্যবহার করুন। যদি ওরিয়েন্টেশন সেন্সর সক্রিয় থাকে, তাহলে
getSphericalProperties
ফাংশন সর্বদাroll
সম্পত্তির মান হিসাবে0
প্রদান করে। - যদি ওরিয়েন্টেশন সেন্সর অক্ষম থাকে, তাহলে এই API ব্যবহার করে রোলটিকে একটি অশূন্য মানতে সেট করুন।
fov
পরিসরের একটি সংখ্যা [30, 120] যা ভিউপোর্টের দীর্ঘ প্রান্ত বরাবর পরিমাপ করা ডিগ্রীতে দৃশ্যের ক্ষেত্র-অফ-ভিউকে উপস্থাপন করে। সংক্ষিপ্ত প্রান্তটি স্বয়ংক্রিয়ভাবে দৃশ্যের আকৃতির অনুপাতের সমানুপাতিক হতে সমন্বয় করা হয়।
ডিফল্ট মান হল 100 ডিগ্রী। মান হ্রাস করা ভিডিও সামগ্রীতে জুম করার মতো, এবং মান বৃদ্ধি করা জুম আউট করার মতো। এই মানটি API ব্যবহার করে বা ভিডিওটি ফুলস্ক্রিন মোডে থাকাকালীন মাউসহুইল ব্যবহার করে সামঞ্জস্য করা যেতে পারে।
-
player. setSphericalProperties (properties:Object):Void
- একটি 360° ভিডিও প্লেব্যাকের জন্য ভিডিও অভিযোজন সেট করে। (যদি বর্তমান ভিডিওটি গোলাকার না হয়, তবে ইনপুট নির্বিশেষে পদ্ধতিটি একটি নো-অপ।)
প্লেয়ার ভিউproperties
অবজেক্টে যেকোন পরিচিত বৈশিষ্ট্যের মানগুলিকে প্রতিফলিত করার জন্য আপডেট করে এই পদ্ধতিতে কলগুলিতে সাড়া দেয়। দৃশ্যটি সেই বস্তুতে অন্তর্ভুক্ত নয় এমন অন্য কোনো পরিচিত বৈশিষ্ট্যের মান বজায় রাখে।
উপরন্তু:- বস্তুতে অজানা এবং/অথবা অপ্রত্যাশিত বৈশিষ্ট্য থাকলে, প্লেয়ার তাদের উপেক্ষা করে।
- এই বিভাগের শুরুতে উল্লেখ করা হয়েছে, 360° ভিডিও প্লেব্যাক অভিজ্ঞতা সমস্ত মোবাইল ডিভাইসে সমর্থিত নয়।
- ডিফল্টরূপে, সমর্থিত মোবাইল ডিভাইসগুলিতে, এই ফাংশনটি শুধুমাত্র
fov
বৈশিষ্ট্য সেট করে এবং 360° ভিডিও প্লেব্যাকের জন্যyaw
,pitch
এবংroll
বৈশিষ্ট্যগুলিকে প্রভাবিত করে না। আরও বিস্তারিত জানার জন্য নীচেরenableOrientationSensor
সম্পত্তি দেখুন।
properties
বস্তুতে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:বৈশিষ্ট্য yaw
উপরে সংজ্ঞা দেখুন. pitch
উপরে সংজ্ঞা দেখুন. roll
উপরে সংজ্ঞা দেখুন. fov
উপরে সংজ্ঞা দেখুন. enableOrientationSensor
দ্রষ্টব্য: এই বৈশিষ্ট্যটি শুধুমাত্র সমর্থিত ডিভাইসগুলিতে 360° দেখার অভিজ্ঞতাকে প্রভাবিত করে। একটি বুলিয়ান মান যা নির্দেশ করে যে IFrame এম্বেড ইভেন্টগুলিতে সাড়া দেবে কিনা যা একটি সমর্থিত ডিভাইসের অভিযোজনে পরিবর্তনের সংকেত দেয়, যেমন একটি মোবাইল ব্রাউজারের DeviceOrientationEvent
। ডিফল্ট প্যারামিটার মানtrue
।
সমর্থিত মোবাইল ডিভাইস- মানটি
true
হলে, একটি এমবেডেড প্লেয়ার 360° ভিডিও প্লেব্যাকের জন্যyaw
,pitch
এবংroll
বৈশিষ্ট্যগুলি সামঞ্জস্য করতে ডিভাইসের গতিবিধির উপর নির্ভর করে। যাইহোক, এখনও API এর মাধ্যমেfov
সম্পত্তি পরিবর্তন করা যেতে পারে, এবং API হল, বাস্তবে, একটি মোবাইল ডিভাইসেfov
সম্পত্তি পরিবর্তন করার একমাত্র উপায়। এটি ডিফল্ট আচরণ। - যখন মানটি
false
হয়, তখন ডিভাইসের গতিবিধি 360° দেখার অভিজ্ঞতাকে প্রভাবিত করে না, এবংyaw
,pitch
,roll
এবংfov
বৈশিষ্ট্যগুলিকে অবশ্যই API এর মাধ্যমে সেট করতে হবে।
অসমর্থিত মোবাইল ডিভাইস
enableOrientationSensor
সম্পত্তির মান প্লেব্যাকের অভিজ্ঞতার উপর কোন প্রভাব ফেলে না।
একটি প্লেলিস্টে একটি ভিডিও চালানো হচ্ছে
-
player. nextVideo ():Void
- এই ফাংশনটি প্লেলিস্টের পরবর্তী ভিডিও লোড করে এবং প্লে করে।
যদি প্লেলিস্টের শেষ ভিডিওটি দেখার সময়
player.nextVideo()
কল করা হয় এবং প্লেলিস্টটি ক্রমাগত প্লে করার জন্য সেট করা হয় (loop
), তাহলে প্লেয়ারটি তালিকার প্রথম ভিডিওটি লোড করবে এবং প্লে করবে৷যদি প্লেলিস্টের শেষ ভিডিওটি দেখার সময়
player.nextVideo()
কল করা হয় এবং প্লেলিস্টটি ক্রমাগত প্লে করার জন্য সেট করা না থাকে, তাহলে প্লেব্যাক শেষ হয়ে যাবে।
-
player. previousVideo ():Void
- এই ফাংশনটি প্লেলিস্টে আগের ভিডিও লোড করে এবং প্লে করে।
যদি প্লেলিস্টের প্রথম ভিডিওটি দেখার সময়
player.previousVideo()
কল করা হয় এবং প্লেলিস্টটি ক্রমাগত প্লে করার জন্য সেট করা থাকে (loop
), তাহলে প্লেয়ারটি তালিকার শেষ ভিডিওটি লোড করবে এবং প্লে করবে।প্লেলিস্টের প্রথম ভিডিওটি দেখার সময় যদি
player.previousVideo()
কল করা হয় এবং প্লেলিস্টটি ক্রমাগত প্লে করার জন্য সেট করা না থাকে, তাহলে প্লেয়ার প্রথম প্লেলিস্ট ভিডিওটি শুরু থেকে রিস্টার্ট করবে।
-
player. playVideoAt (index:Number):Void
- এই ফাংশনটি প্লেলিস্টে নির্দিষ্ট ভিডিও লোড করে এবং প্লে করে।
প্রয়োজনীয়
index
প্যারামিটারটি ভিডিওটির সূচী নির্দিষ্ট করে যা আপনি প্লেলিস্টে চালাতে চান। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে, তাই0
এর মান তালিকার প্রথম ভিডিওটিকে চিহ্নিত করে৷ আপনি যদি প্লেলিস্টটি এলোমেলো করে থাকেন, তাহলে এই ফাংশনটি এলোমেলো প্লেলিস্টের নির্দিষ্ট অবস্থানে ভিডিও চালাবে।
প্লেয়ার ভলিউম পরিবর্তন
-
player. mute ():Void
- প্লেয়ারকে নিঃশব্দ করে।
-
player. unMute ():Void
- প্লেয়ারকে আনমিউট করে।
-
player. isMuted ():Boolean
- প্লেয়ার নিঃশব্দ হলে
true
, না হলেfalse
ফেরত দেয়।
-
player. setVolume (volume:Number):Void
- ভলিউম সেট করে।
0
এবং100
মধ্যে একটি পূর্ণসংখ্যা গ্রহণ করে।
-
player. getVolume ():Number
- প্লেয়ারের বর্তমান ভলিউম,
0
এবং100
মধ্যে একটি পূর্ণসংখ্যা প্রদান করে। মনে রাখবেন যে প্লেয়ারটি নিঃশব্দ থাকলেওgetVolume()
ভলিউম ফিরিয়ে দেবে।
প্লেয়ারের আকার সেট করা হচ্ছে
-
player.setSize(width:Number, height:Number):Object
- প্লেয়ার ধারণ করে
<iframe>
এর পিক্সেলের আকার সেট করে।
প্লেব্যাক রেট সেট করা হচ্ছে
-
player. getPlaybackRate ():Number
- এই ফাংশনটি বর্তমানে বাজানো ভিডিওর প্লেব্যাক রেট পুনরুদ্ধার করে। ডিফল্ট প্লেব্যাক রেট হল
1
, যা নির্দেশ করে যে ভিডিওটি স্বাভাবিক গতিতে চলছে৷ প্লেব্যাক রেট0.25
,0.5
,1
,1.5
, এবং2
এর মত মান অন্তর্ভুক্ত করতে পারে৷
-
player. setPlaybackRate (suggestedRate:Number):Void
- এই ফাংশনটি বর্তমান ভিডিওর জন্য প্রস্তাবিত প্লেব্যাক রেট সেট করে। প্লেব্যাকের হার পরিবর্তিত হলে, এটি শুধুমাত্র সেই ভিডিওর জন্য পরিবর্তিত হবে যা ইতিমধ্যেই কিউ করা হয়েছে বা চালানো হচ্ছে৷ আপনি যদি একটি cued ভিডিওর জন্য প্লেব্যাক রেট সেট করেন, তাহলে
playVideo
ফাংশন কল করা হলে বা প্লেয়ার কন্ট্রোলের মাধ্যমে ব্যবহারকারী সরাসরি প্লেব্যাক শুরু করলে সেই হার কার্যকর থাকবে৷ উপরন্তু, ভিডিও বা প্লেলিস্ট (cueVideoById
,loadVideoById
, ইত্যাদি) কিউ বা লোড করার ফাংশন কলিং প্লেব্যাক রেট1
এ রিসেট করবে।
এই ফাংশনটি কল করা গ্যারান্টি দেয় না যে প্লেব্যাকের হার আসলেই পরিবর্তিত হবে৷ যাইহোক, যদি প্লেব্যাক রেট পরিবর্তিত হয়, তাহলেonPlaybackRateChange
ইভেন্টটি ফায়ার হবে এবং আপনার কোডটি ইভেন্টে সাড়া দেওয়া উচিত নয় বরং এটিকেsetPlaybackRate
ফাংশন বলে।
getAvailablePlaybackRates
পদ্ধতিটি বর্তমানে প্লেব্যাক করা ভিডিওর সম্ভাব্য প্লেব্যাকের হার ফিরিয়ে দেবে। যাইহোক, যদি আপনিsuggestedRate
প্যারামিটারটিকে একটি অ-সমর্থিত পূর্ণসংখ্যা বা ফ্লোট মান সেট করেন, প্লেয়ার সেই মানটিকে1
এর দিক থেকে নিকটতম সমর্থিত মানের দিকে বৃত্তাকার করবে।
-
player. getAvailablePlaybackRates ():Array
- এই ফাংশনটি প্লেব্যাক রেটগুলির সেট প্রদান করে যেখানে বর্তমান ভিডিও উপলব্ধ। ডিফল্ট মান হল
1
, যা নির্দেশ করে যে ভিডিওটি স্বাভাবিক গতিতে চলছে৷
ফাংশনটি ধীর থেকে দ্রুততম প্লেব্যাক গতিতে অর্ডার করা সংখ্যার একটি অ্যারে প্রদান করে। প্লেয়ার পরিবর্তনশীল প্লেব্যাক গতি সমর্থন না করলেও, অ্যারেতে সর্বদা কমপক্ষে একটি মান (1
) থাকা উচিত।
প্লেলিস্টের জন্য প্লেব্যাক আচরণ সেট করা
-
player. setLoop (loopPlaylists:Boolean):Void
এই ফাংশনটি নির্দেশ করে যে ভিডিও প্লেয়ারটি ক্রমাগত একটি প্লেলিস্ট চালাবে বা প্লেলিস্টের শেষ ভিডিওটি শেষ হওয়ার পরে এটি চালানো বন্ধ করা উচিত কিনা। ডিফল্ট আচরণ হল যে প্লেলিস্ট লুপ হয় না।
আপনি একটি ভিন্ন প্লেলিস্ট লোড করলে বা কিউ করলেও এই সেটিংটি টিকে থাকবে, যার মানে হল যে আপনি যদি একটি প্লেলিস্ট লোড করেন,
setLoop
ফাংশনটিকেtrue
এর মান সহ কল করুন এবং তারপরে একটি দ্বিতীয় প্লেলিস্ট লোড করুন, দ্বিতীয় প্লেলিস্টটিও লুপ হবে৷প্রয়োজনীয়
loopPlaylists
প্যারামিটার লুপিং আচরণ সনাক্ত করে।যদি পরামিতি মান
true
হয়, তাহলে ভিডিও প্লেয়ার ক্রমাগত প্লেলিস্ট চালাবে। একটি প্লেলিস্টে শেষ ভিডিওটি প্লে করার পরে, ভিডিও প্লেয়ারটি প্লেলিস্টের শুরুতে ফিরে যাবে এবং এটি আবার প্লে করবে।যদি প্যারামিটার মান
false
হয়, তাহলে ভিডিও প্লেয়ার একটি প্লেলিস্টে শেষ ভিডিওটি প্লে করার পরে প্লেব্যাকগুলি শেষ হবে৷
-
player. setShuffle (shufflePlaylist:Boolean):Void
এই ফাংশনটি নির্দেশ করে যে একটি প্লেলিস্টের ভিডিওগুলিকে এলোমেলো করা উচিত যাতে সেগুলি প্লেলিস্ট নির্মাতার দ্বারা মনোনীত একটি থেকে ভিন্ন ক্রমে প্লে হয়৷ আপনি যদি একটি প্লেলিস্ট ইতিমধ্যেই বাজানো শুরু করার পরে এটিকে এলোমেলো করেন, তাহলে যে ভিডিওটি প্লে হচ্ছে সেটি চলতে থাকাকালীন তালিকাটি পুনরায় সাজানো হবে৷ পরবর্তী ভিডিও যেটি প্লে হবে তা পুনরায় সাজানো তালিকার উপর ভিত্তি করে নির্বাচন করা হবে।
আপনি যদি একটি ভিন্ন প্লেলিস্ট লোড করেন বা কিউ করেন তাহলে এই সেটিংটি টিকে থাকবে না, যার মানে হল আপনি যদি একটি প্লেলিস্ট লোড করেন,
setShuffle
ফাংশনটি কল করেন এবং তারপরে একটি দ্বিতীয় প্লেলিস্ট লোড করেন, তাহলে দ্বিতীয় প্লেলিস্টটি এলোমেলো করা হবে না৷প্রয়োজনীয়
shufflePlaylist
প্যারামিটারটি নির্দেশ করে যে YouTube প্লেলিস্ট এলোমেলো করবে কিনা।যদি প্যারামিটার মান
true
হয়, তাহলে YouTube প্লেলিস্টের ক্রম পরিবর্তন করবে। যদি আপনি ফাংশনটিকে এমন একটি প্লেলিস্ট শাফেল করার নির্দেশ দেন যা ইতিমধ্যেই শাফেল করা হয়েছে, তাহলে YouTube আবার অর্ডারটি এলোমেলো করবে৷যদি প্যারামিটারের মান
false
হয়, তাহলে YouTube প্লেলিস্টের ক্রমটিকে তার আসল ক্রমে পরিবর্তন করবে৷
প্লেব্যাক অবস্থা
-
player. getVideoLoadedFraction ():Float
-
0
এবং1
এর মধ্যে একটি সংখ্যা প্রদান করে যা ভিডিওটির শতাংশ নির্দিষ্ট করে যা প্লেয়ারটি বাফার হিসাবে দেখায়৷ এই পদ্ধতিটি এখন-বঞ্চিতgetVideoBytesLoaded
এবংgetVideoBytesTotal
পদ্ধতির চেয়ে আরও নির্ভরযোগ্য সংখ্যা প্রদান করে।
-
player.getPlayerState():Number
- খেলোয়াড়ের অবস্থা ফেরত দেয়। সম্ভাব্য মান হল:
-
-1
- চালু করা হয়নি -
0
- শেষ -
1
- খেলা -
2
- বিরতি দেওয়া হয়েছে -
3
- বাফারিং -
5
- ভিডিও cued
-
-
player. getCurrentTime ():Number
- ভিডিও চালানো শুরু হওয়ার পর থেকে সেকেন্ডে অতিবাহিত সময় ফেরত দেয়।
-
player. getVideoStartBytes ():Number
- 31 অক্টোবর, 2012 থেকে অবচয়। (এই পদ্ধতিটি এখন সর্বদা
0
এর মান প্রদান করে।) উদাহরণ দৃশ্যকল্প: ব্যবহারকারী এমন একটি বিন্দুর দিকে এগিয়ে যায় যা এখনও লোড হয়নি, এবং প্লেয়ার ভিডিওটির একটি অংশ চালানোর জন্য একটি নতুন অনুরোধ করে যা এখনও লোড হয়নি।
-
player. getVideoBytesLoaded ():Number
- 18 জুলাই, 2012-এ অবমুক্ত করা হয়েছে৷ পরিবর্তে, বাফার হওয়া ভিডিওটির শতাংশ নির্ধারণ করতে
getVideoLoadedFraction
পদ্ধতি ব্যবহার করুন৷
এই পদ্ধতিটি0
এবং1000
এর মধ্যে একটি মান প্রদান করে যা লোড করা ভিডিওর পরিমাণ আনুমানিক করে।getVideoBytesLoaded
মানটিকেgetVideoBytesTotal
মান দিয়ে ভাগ করে লোড করা ভিডিওটির ভগ্নাংশ আপনি গণনা করতে পারেন।
-
player. getVideoBytesTotal ():Number
- 18 জুলাই, 2012-এ অবমুক্ত করা হয়েছে৷ পরিবর্তে, বাফার হওয়া ভিডিওটির শতাংশ নির্ধারণ করতে
getVideoLoadedFraction
পদ্ধতি ব্যবহার করুন৷
বর্তমানে লোড হওয়া/প্লে করা ভিডিওর বাইটের আকার বা ভিডিওর আকারের আনুমানিক আকার প্রদান করে।
এই পদ্ধতিটি সর্বদা1000
এর মান প্রদান করে।getVideoBytesLoaded
মানটিকেgetVideoBytesTotal
মান দিয়ে ভাগ করে লোড করা ভিডিওটির ভগ্নাংশ আপনি গণনা করতে পারেন।
ভিডিও তথ্য পুনরুদ্ধার করা হচ্ছে
-
player. getDuration ():Number
- বর্তমানে প্লে করা ভিডিওর সেকেন্ডের মধ্যে সময়কাল ফেরত দেয়। নোট করুন যে ভিডিওর মেটাডেটা লোড না হওয়া পর্যন্ত
getDuration()
0
রিটার্ন করবে, যা সাধারণত ভিডিও প্লে শুরু হওয়ার পরই ঘটে।
যদি বর্তমানে প্লে করা ভিডিওটি একটি লাইভ ইভেন্ট হয়,getDuration()
ফাংশন লাইভ ভিডিও স্ট্রিম শুরু হওয়ার পর থেকে অতিবাহিত সময় ফিরিয়ে দেবে। বিশেষত, এটি রিসেট বা বাধা ছাড়াই ভিডিওটি স্ট্রিম করা সময়ের পরিমাণ। উপরন্তু, এই সময়কাল সাধারণত ইভেন্টের প্রকৃত সময়ের চেয়ে বেশি হয় কারণ ইভেন্টের শুরুর সময়ের আগে স্ট্রিমিং শুরু হতে পারে।
-
player. getVideoUrl ():String
- বর্তমানে লোড করা/চালানো ভিডিওর জন্য YouTube.com URL প্রদান করে।
-
player. getVideoEmbedCode ():String
- বর্তমানে লোড হওয়া/প্লে করা ভিডিওর জন্য এম্বেড কোড প্রদান করে।
প্লেলিস্ট তথ্য পুনরুদ্ধার করা হচ্ছে
-
player. getPlaylist ():Array
- এই ফাংশনটি প্লেলিস্টে ভিডিও আইডিগুলির একটি অ্যারে প্রদান করে যেমন সেগুলি বর্তমানে অর্ডার করা হয়েছে৷ ডিফল্টরূপে, এই ফাংশনটি প্লেলিস্টের মালিকের দ্বারা মনোনীত ক্রমে ভিডিও আইডি ফিরিয়ে দেবে৷ যাইহোক, যদি আপনি প্লেলিস্টের ক্রম এলোমেলো করার জন্য
setShuffle
ফাংশনকে কল করেন, তাহলেgetPlaylist()
ফাংশনের রিটার্ন মান পরিবর্তন করা ক্রমকে প্রতিফলিত করবে।
-
player. getPlaylistIndex ():Number
- এই ফাংশনটি বর্তমানে প্লেলিস্ট ভিডিওটির সূচকটি ফিরিয়ে দেয়।
আপনি যদি প্লেলিস্টটি বদলে না থাকেন তবে রিটার্ন মানটি প্লেলিস্ট স্রষ্টা ভিডিওটি যেখানে রেখেছিল সেই অবস্থানটি সনাক্ত করবে। রিটার্ন মানটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে, সুতরাং
0
এর একটি মান প্লেলিস্টে প্রথম ভিডিওটি সনাক্ত করে।আপনি যদি প্লেলিস্টটি বদল করে থাকেন তবে রিটার্ন মানটি বদলে যাওয়া প্লেলিস্টের মধ্যে ভিডিওর ক্রমটি সনাক্ত করবে।
কোনও ইভেন্ট শ্রোতা যুক্ত বা অপসারণ
-
player. addEventListener (event:String, listener:String):Void
- নির্দিষ্ট
event
জন্য শ্রোতার ফাংশন যুক্ত করে। নীচের ইভেন্টগুলি বিভাগটি প্লেয়ারকে গুলি চালাতে পারে এমন বিভিন্ন ঘটনা চিহ্নিত করে। শ্রোতা এমন একটি স্ট্রিং যা ফাংশনটি নির্দিষ্ট করে যা নির্দিষ্ট ইভেন্টটি আগুন লাগলে কার্যকর হবে।
-
player. removeEventListener (event:String, listener:String):Void
- নির্দিষ্ট
event
জন্য শ্রোতার ফাংশন সরিয়ে দেয়।listener
এমন একটি স্ট্রিং যা ফাংশনটি চিহ্নিত করে যা নির্দিষ্ট ইভেন্টটি আগুন লাগলে আর কার্যকর হবে না।
ডিওএম নোড অ্যাক্সেস এবং সংশোধন করা
-
player. getIframe ():Object
- এই পদ্ধতিটি এম্বেডড
<iframe>
এর জন্য ডোম নোডটি ফেরত দেয়।
-
player. destroy ():Void
- প্লেয়ারযুক্ত
<iframe>
সরিয়ে দেয়।
ঘটনা
এম্বেড থাকা প্লেয়ারে আপনার পরিবর্তনের প্রয়োগকে অবহিত করতে এপিআই ইভেন্টগুলিকে আগুন দেয়। পূর্ববর্তী বিভাগে উল্লিখিত হিসাবে, আপনি YT.Player
অবজেক্টটি তৈরি করার সময় কোনও ইভেন্ট শ্রোতা যুক্ত করে ইভেন্টগুলিতে সাবস্ক্রাইব করতে পারেন এবং আপনি addEventListener
ফাংশনটিও ব্যবহার করতে পারেন।
এপিআই সেই প্রতিটি ফাংশনগুলির একমাত্র যুক্তি হিসাবে কোনও ইভেন্ট অবজেক্টটি পাস করবে। ইভেন্ট অবজেক্টের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
- ইভেন্টের
target
ভিডিও প্লেয়ারকে সনাক্ত করে যা ইভেন্টের সাথে মিলে যায়। - ইভেন্টের
data
ইভেন্টের সাথে সম্পর্কিত একটি মান নির্দিষ্ট করে। নোট করুন যেonReady
এবংonAutoplayBlocked
ইভেন্টগুলি কোনওdata
সম্পত্তি নির্দিষ্ট করে না।
নিম্নলিখিত তালিকাটি এপিআই আগুনের ঘটনাগুলি সংজ্ঞায়িত করে:
-
onReady
- এই ইভেন্টটি আগুন লাগে যখনই কোনও খেলোয়াড় লোডিং শেষ করে এবং এপিআই কলগুলি গ্রহণ শুরু করতে প্রস্তুত। প্লেয়ার প্রস্তুত হওয়ার সাথে সাথে আপনি যদি ভিডিওটি বাজানো বা ভিডিও সম্পর্কে তথ্য প্রদর্শন করার মতো নির্দিষ্ট ক্রিয়াকলাপগুলি স্বয়ংক্রিয়ভাবে সম্পাদন করতে চান তবে আপনার অ্যাপ্লিকেশনটি এই ফাংশনটি বাস্তবায়ন করা উচিত।
নীচের উদাহরণটি এই ইভেন্টটি পরিচালনা করার জন্য একটি নমুনা ফাংশন দেখায়। এপিআই ফাংশনে পাস করা ইভেন্ট অবজেক্টটিতে একটিtarget
সম্পত্তি রয়েছে, যা প্লেয়ারকে চিহ্নিত করে। ফাংশনটি বর্তমানে লোড হওয়া ভিডিওর জন্য এম্বেড কোডটি পুনরুদ্ধার করে, ভিডিওটি বাজাতে শুরু করে এবংembed-code
id
মান রয়েছে এমন পৃষ্ঠা উপাদানটিতে এম্বেড কোডটি প্রদর্শন করে।function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
-
onStateChange
- এই ইভেন্টটি যখনই প্লেয়ারের রাষ্ট্র পরিবর্তন করে। ইভেন্ট অবজেক্টের
data
সম্পত্তি যা আপনার ইভেন্ট শ্রোতার ফাংশনে এপিআই পাস করে তা একটি পূর্ণসংখ্যা নির্দিষ্ট করবে যা নতুন প্লেয়ার অবস্থার সাথে মিলে যায়। সম্ভাব্য মান হল:-
-1
(আনস্টার্টেড) -
0
(শেষ) -
1
(বাজানো) -
2
(বিরতি) -
3
(বাফারিং) -
5
(ভিডিও উদ্ধৃত)।
unstarted
(-1
) ইভেন্টটি সম্প্রচার করবে। যখন কোনও ভিডিও উদ্ধৃত হয় এবং খেলতে প্রস্তুত হয়, তখন প্লেয়ার একটিvideo cued
(5
) ইভেন্টটি সম্প্রচার করবে। আপনার কোডে, আপনি পূর্ণসংখ্যার মানগুলি নির্দিষ্ট করতে পারেন বা আপনি নিম্নলিখিত নেমস্পেসড ভেরিয়েবলগুলির একটি ব্যবহার করতে পারেন:-
YT.PlayerState.ENDED
-
YT.PlayerState.PLAYING
-
YT.PlayerState.PAUSED
-
YT.PlayerState.BUFFERING
-
YT.PlayerState.CUED
-
-
onPlaybackQualityChange
- এই ইভেন্টটি যখনই ভিডিও প্লেব্যাকের মানের পরিবর্তন হয়। এটি দর্শকের প্লেব্যাক পরিবেশে পরিবর্তনের ইঙ্গিত দিতে পারে। প্লেব্যাকের অবস্থাকে প্রভাবিত করে এমন কারণগুলি সম্পর্কে আরও তথ্যের জন্য ইউটিউব সহায়তা কেন্দ্রটি দেখুন বা এটি ঘটনাকে আগুনের কারণ হতে পারে।
ইভেন্ট অবজেক্টেরdata
সম্পত্তি মান যা এপিআই ইভেন্ট শ্রোতার ফাংশনে পাস করে এমন একটি স্ট্রিং হবে যা নতুন প্লেব্যাকের গুণমান চিহ্নিত করে। সম্ভাব্য মান হল:-
small
-
medium
-
large
-
hd720
-
hd1080
-
highres
-
-
onPlaybackRateChange
- এই ইভেন্টটি যখনই ভিডিও প্লেব্যাক রেট পরিবর্তন করে তখন আগুন লাগে। উদাহরণস্বরূপ, আপনি যদি
setPlaybackRate(suggestedRate)
ফাংশনটি কল করেন তবে প্লেব্যাকের হার আসলে পরিবর্তিত হলে এই ইভেন্টটি গুলি চালাবে। আপনার অ্যাপ্লিকেশনটিতে ইভেন্টটির প্রতিক্রিয়া জানানো উচিত এবং এটি ধরে নেওয়া উচিত নয় যেsetPlaybackRate(suggestedRate)
ফাংশনটি বলা হয় তখন প্লেব্যাক রেট স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে। একইভাবে, আপনার কোডটি ধরে নেওয়া উচিত নয় যে ভিডিও প্লেব্যাকের হার কেবলsetPlaybackRate
একটি সুস্পষ্ট কলের ফলস্বরূপ পরিবর্তিত হবে।
ইভেন্ট অবজেক্টেরdata
সম্পত্তি মান যা এপিআই ইভেন্ট শ্রোতার ফাংশনে পাস করে এমন একটি সংখ্যা হবে যা নতুন প্লেব্যাকের হার চিহ্নিত করে।getAvailablePlaybackRates
পদ্ধতিটি বর্তমানে উদ্ধৃত বা প্লে ভিডিওর জন্য বৈধ প্লেব্যাক হারের একটি তালিকা ফেরত দেয়।
-
onError
- প্লেয়ারে কোনও ত্রুটি দেখা দিলে এই ইভেন্টটি আগুন লাগে। এপিআই ইভেন্ট শ্রোতার ফাংশনে কোনও
event
অবজেক্টটি পাস করবে। এই অবজেক্টেরdata
সম্পত্তি একটি পূর্ণসংখ্যা নির্দিষ্ট করবে যা ঘটেছিল ত্রুটির ধরণ চিহ্নিত করে। সম্ভাব্য মান হল:-
2
- অনুরোধে একটি অবৈধ প্যারামিটার মান রয়েছে। উদাহরণস্বরূপ, এই ত্রুটিটি ঘটে যদি আপনি কোনও ভিডিও আইডি নির্দিষ্ট করেন যার মধ্যে 11 টি অক্ষর নেই, বা ভিডিও আইডিতে অবৈধ অক্ষর যেমন বিস্ময়কর পয়েন্ট বা তারকাচিহ্ন রয়েছে। -
5
- অনুরোধ করা সামগ্রীটি এইচটিএমএল 5 প্লেয়ারে প্লে করা যাবে না বা এইচটিএমএল 5 প্লেয়ারের সাথে সম্পর্কিত অন্য কোনও ত্রুটি ঘটেছে। -
100
- অনুরোধ করা ভিডিওটি পাওয়া যায় নি। এই ত্রুটিটি ঘটে যখন কোনও ভিডিও সরানো হয়েছে (কোনও কারণে) বা ব্যক্তিগত হিসাবে চিহ্নিত করা হয়েছে। -
101
- অনুরোধ করা ভিডিওর মালিক এটি এম্বেড থাকা খেলোয়াড়দের মধ্যে খেলতে দেয় না। -
150
- এই ত্রুটিটি101
মতোই। ছদ্মবেশে এটি কেবল একটি101
ত্রুটি!
-
-
onApiChange
- প্লেয়ারটি উন্মুক্ত এপিআই পদ্ধতি সহ একটি মডিউল লোড করেছে (বা আনলোড করা হয়েছে) তা নির্দেশ করার জন্য এই ইভেন্টটি বরখাস্ত করা হয়েছে। আপনার অ্যাপ্লিকেশনটি এই ইভেন্টটির জন্য শুনতে পারে এবং তারপরে সম্প্রতি লোড হওয়া মডিউলটির জন্য কোন বিকল্পগুলি উন্মুক্ত করা হয়েছে তা নির্ধারণ করতে প্লেয়ারকে পোল করতে পারে। আপনার অ্যাপ্লিকেশনটি তখন সেই বিকল্পগুলির জন্য বিদ্যমান সেটিংস পুনরুদ্ধার বা আপডেট করতে পারে।
নিম্নলিখিত কমান্ডটি মডিউল নামগুলির একটি অ্যারে পুনরুদ্ধার করে যার জন্য আপনি প্লেয়ার বিকল্পগুলি সেট করতে পারেন: বর্তমানে, আপনি কেবলমাত্র মডিউল যা বিকল্প সেট করতে পারেন তা হ'লplayer.getOptions();
captions
মডিউল, যা প্লেয়ারে বন্ধ ক্যাপশনিং পরিচালনা করে। একটিonApiChange
ইভেন্ট পাওয়ার পরে, আপনার অ্যাপ্লিকেশনটিcaptions
মডিউলটির জন্য কোন বিকল্পগুলি সেট করা যেতে পারে তা নির্ধারণ করতে নিম্নলিখিত কমান্ডটি ব্যবহার করতে পারে: এই কমান্ডটি দিয়ে প্লেয়ারকে ভোট দিয়ে আপনি নিশ্চিত করতে পারেন যে আপনি যে বিকল্পগুলি অ্যাক্সেস করতে চান তা প্রকৃতপক্ষে অ্যাক্সেসযোগ্য। নিম্নলিখিত কমান্ডগুলি মডিউল বিকল্পগুলি পুনরুদ্ধার এবং আপডেট করুন:player.getOptions('captions');
নীচের টেবিলটি এপিআই সমর্থন করে এমন বিকল্পগুলি তালিকাভুক্ত করে:Retrieving an option: player.getOption(module, option); Setting an option player.setOption(module, option, value);
মডিউল অপশন বর্ণনা captions fontSize এই বিকল্পটি প্লেয়ারে প্রদর্শিত ক্যাপশনগুলির ফন্টের আকার সামঞ্জস্য করে।
বৈধ মানগুলি-1
,0
,1
,2
এবং3
হয়। ডিফল্ট আকার0
, এবং ক্ষুদ্রতম আকারটি-1
। এই বিকল্পটি-1
একটি পূর্ণসংখ্যার দিকে সেট করা সবচেয়ে ছোট ক্যাপশন আকারটি প্রদর্শন করতে পারে, যখন এই বিকল্পটি3
উপরে একটি পূর্ণসংখ্যায় সেট করা বৃহত্তম ক্যাপশন আকার প্রদর্শন করতে পারে।captions reload এই বিকল্পটি যে ভিডিওটি খেলছে তার জন্য বন্ধ ক্যাপশন ডেটা পুনরায় লোড করে। আপনি যদি বিকল্পের মানটি পুনরুদ্ধার করেন তবে মানটি null
হবে। বদ্ধ ক্যাপশন ডেটা পুনরায় লোড করতে মানটিtrue
সেট করুন।
-
onAutoplayBlocked
- এই ইভেন্টটি যে কোনও সময় ব্রাউজারটি অটোপ্লে বা স্ক্রিপ্টযুক্ত ভিডিও প্লেব্যাক বৈশিষ্ট্যগুলি ব্লক করে, সম্মিলিতভাবে "অটোপ্লে" হিসাবে উল্লেখ করা হয়। এর মধ্যে নিম্নলিখিত প্লেয়ার এপিআইগুলির সাথে প্লেব্যাক চেষ্টা করা অন্তর্ভুক্ত রয়েছে:
-
autoplay
প্যারামিটার -
loadPlaylist
ফাংশন -
loadVideoById
ফাংশন -
loadVideoByUrl
ফাংশন -
playVideo
ফাংশন
সম্পূর্ণ তথ্যের জন্য, ব্রাউজার-নির্দিষ্ট নীতিগুলি ( অ্যাপল সাফারি / ওয়েবকিট , গুগল ক্রোম , মোজিলা ফায়ারফক্স ) এবং মোজিলার অটোপ্লে গাইড দেখুন। -
উদাহরণ
YT.Player
অবজেক্ট তৈরি করা
উদাহরণ 1: বিদ্যমান <আইফ্রেম> সহ এপিআই ব্যবহার করুন
এই উদাহরণে, পৃষ্ঠায় একটি
<iframe>
উপাদান ইতিমধ্যে প্লেয়ারকে সংজ্ঞায়িত করে যার সাথে এপিআই ব্যবহৃত হবে। মনে রাখবেন যে উভয়ই প্লেয়ারেরsrc
ইউআরএল অবশ্যইenablejsapi
প্যারামিটারটি1
এ সেট করতে হবে বা<iframe>
এলিমেন্টেরenablejsapi
বৈশিষ্ট্যটিtrue
সেট করতে হবে।প্লেয়ার প্রস্তুত থাকাকালীন
onPlayerReady
ফাংশনটি প্লেয়ারের চারপাশের সীমান্তের রঙকে কমলাতে পরিবর্তন করে।onPlayerStateChange
ফাংশনটি তারপরে বর্তমান প্লেয়ারের স্থিতির উপর ভিত্তি করে প্লেয়ারের চারপাশের সীমান্তের রঙ পরিবর্তন করে। উদাহরণস্বরূপ, রঙটি সবুজ হয় যখন প্লেয়ারটি খেলছে, যখন লাল হয়ে গেছে তখন লাল, বাফার করার সময় নীল এবং আরও অনেক কিছু।এই উদাহরণটি নিম্নলিখিত কোডটি ব্যবহার করে:
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('existing-iframe-example', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; } function changeBorderColor(playerStatus) { var color; if (playerStatus == -1) { color = "#37474F"; // unstarted = gray } else if (playerStatus == 0) { color = "#FFFF00"; // ended = yellow } else if (playerStatus == 1) { color = "#33691E"; // playing = green } else if (playerStatus == 2) { color = "#DD2C00"; // paused = red } else if (playerStatus == 3) { color = "#AA00FF"; // buffering = purple } else if (playerStatus == 5) { color = "#FF6DOO"; // video cued = orange } if (color) { document.getElementById('existing-iframe-example').style.borderColor = color; } } function onPlayerStateChange(event) { changeBorderColor(event.data); } </script>
উদাহরণ 2: জোরে প্লেব্যাক
এই উদাহরণটি 720px ভিডিও প্লেয়ার দ্বারা একটি 1280px তৈরি করে।
onReady
ইভেন্টের জন্য ইভেন্ট শ্রোতা তারপরে ভলিউমটি সর্বোচ্চ সেটিংয়ের সাথে সামঞ্জস্য করতেsetVolume
ফাংশনটিকে কল করে।function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); }
উদাহরণ 3: এই উদাহরণটি ভিডিওটি যখন লোড হয় তখন স্বয়ংক্রিয়ভাবে খেলতে এবং ভিডিও প্লেয়ারের নিয়ন্ত্রণগুলি আড়াল করার জন্য প্লেয়ার পরামিতিগুলি সেট করে। এটি এপিআই সম্প্রচার করে এমন বেশ কয়েকটি ইভেন্টের জন্য ইভেন্ট শ্রোতাদেরও যুক্ত করে।
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
360 ° ভিডিও নিয়ন্ত্রণ করা
এই উদাহরণটি নিম্নলিখিত কোডটি ব্যবহার করে:
<style> .current-values { color: #666; font-size: 12px; } </style> <!-- The player is inserted in the following div element --> <div id="spherical-video-player"></div> <!-- Display spherical property values and enable user to update them. --> <table style="border: 0; width: 640px;"> <tr style="background: #fff;"> <td> <label for="yaw-property">yaw: </label> <input type="text" id="yaw-property" style="width: 80px"><br> <div id="yaw-current-value" class="current-values"> </div> </td> <td> <label for="pitch-property">pitch: </label> <input type="text" id="pitch-property" style="width: 80px"><br> <div id="pitch-current-value" class="current-values"> </div> </td> <td> <label for="roll-property">roll: </label> <input type="text" id="roll-property" style="width: 80px"><br> <div id="roll-current-value" class="current-values"> </div> </td> <td> <label for="fov-property">fov: </label> <input type="text" id="fov-property" style="width: 80px"><br> <div id="fov-current-value" class="current-values"> </div> </td> <td style="vertical-align: bottom;"> <button id="spherical-properties-button">Update properties</button> </td> </tr> </table> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov']; var updateButton = document.getElementById('spherical-properties-button'); // Create the YouTube Player. var ytplayer; function onYouTubeIframeAPIReady() { ytplayer = new YT.Player('spherical-video-player', { height: '360', width: '640', videoId: 'FAtdv94yzp4', }); } // Don't display current spherical settings because there aren't any. function hideCurrentSettings() { for (var p = 0; p < PROPERTIES.length; p++) { document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = ''; } } // Retrieve current spherical property values from the API and display them. function updateSetting() { if (!ytplayer || !ytplayer.getSphericalProperties) { hideCurrentSettings(); } else { let newSettings = ytplayer.getSphericalProperties(); if (Object.keys(newSettings).length === 0) { hideCurrentSettings(); } else { for (var p = 0; p < PROPERTIES.length; p++) { if (newSettings.hasOwnProperty(PROPERTIES[p])) { currentValueNode = document.getElementById(PROPERTIES[p] + '-current-value'); currentValueNode.innerHTML = ('current: ' + newSettings[PROPERTIES[p]].toFixed(4)); } } } } requestAnimationFrame(updateSetting); } updateSetting(); // Call the API to update spherical property values. updateButton.onclick = function() { var sphericalProperties = {}; for (var p = 0; p < PROPERTIES.length; p++) { var propertyInput = document.getElementById(PROPERTIES[p] + '-property'); sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value); } ytplayer.setSphericalProperties(sphericalProperties); } </script>
অ্যান্ড্রয়েড ওয়েবভিউ মিডিয়া ইন্টিগ্রিটি এপিআই ইন্টিগ্রেশন
ইউটিউব এম্বেডিং অ্যাপের সত্যতা যাচাই করতে অ্যান্ড্রয়েড অ্যাপ্লিকেশনগুলিতে ইউটিউব প্লেয়ার এম্বেড সহ এম্বেডড মিডিয়া প্লেয়ারগুলি সক্ষম করতে অ্যান্ড্রয়েড ওয়েবভিউ মিডিয়া ইন্টিগ্রিটি এপিআইকে প্রসারিত করেছে। এই পরিবর্তনের সাথে, এম্বেডিং অ্যাপ্লিকেশনগুলি স্বয়ংক্রিয়ভাবে ইউটিউবে একটি সত্যায়িত অ্যাপ্লিকেশন আইডি প্রেরণ করে। এই এপিআই ব্যবহারের মাধ্যমে সংগৃহীত ডেটা হ'ল অ্যাপ মেটাডেটা (প্যাকেজের নাম, সংস্করণ নম্বর, এবং স্বাক্ষর শংসাপত্র) এবং গুগল প্লে পরিষেবাদি দ্বারা উত্পাদিত একটি ডিভাইস প্রমাণীকরণ টোকেন।
অ্যাপ্লিকেশন এবং ডিভাইস অখণ্ডতা যাচাই করতে ডেটা ব্যবহৃত হয়। এটি এনক্রিপ্ট করা হয়, তৃতীয় পক্ষের সাথে ভাগ করা হয় না এবং একটি নির্দিষ্ট ধরে রাখার সময়কালের পরে মুছে ফেলা হয়। অ্যাপ্লিকেশন বিকাশকারীরা তাদের অ্যাপ্লিকেশন পরিচয়টি ওয়েবভিউ মিডিয়া ইন্টিগ্রিটি এপিআইতে কনফিগার করতে পারে। কনফিগারেশন একটি অপ্ট-আউট বিকল্প সমর্থন করে।
পুনর্বিবেচনার ইতিহাস
June 24, 2024
The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.
November 20, 2023
The new onAutoplayBlocked
event API is now available.
This event notifies your application if the browser blocks autoplay or scripted playback.
Verification of autoplay success or failure is an
established paradigm
for HTMLMediaElements, and the onAutoplayBlocked
event now provides similar
functionality for the IFrame Player API.
April 27, 2021
The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars
object to customize the player.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the IFrame Player API's queueing functions for lists ,
cuePlaylist
and
loadPlaylist
.
This change will become effective on or after cuePlaylist
or loadPlaylist
functions that set the listType
property to search
will generate a 4xx
response code, such as
404
( Not Found
) or 410
( Gone
). This change
also affects the list
property for those functions as that property no longer
supports the ability to specify a search query.
As an alternative, you can use the YouTube Data API's
search.list
method to retrieve search
results and then load selected videos in the player.
October 24, 2019
The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article , to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.
The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:
- The
getPlaybackQuality
,setPlaybackQuality
, andgetAvailableQualityLevels
functions are no longer supported. In particular, calls tosetPlaybackQuality
will be no-op functions, meaning they will not actually have any impact on the viewer's playback experience. - The queueing functions for videos and playlists --
cueVideoById
,loadVideoById
, etc. -- no longer support thesuggestedQuality
argument. Similarly, if you call those functions using object syntax, thesuggestedQuality
field is no longer supported. IfsuggestedQuality
is specified, it will be ignored when the request is handled. It will not generate any warnings or errors. - The
onPlaybackQualityChange
event is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.
May 16, 2018
The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos :
- The
getSphericalProperties
function retrieves the current orientation for the video playback. The orientation includes the following data:- yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
- pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
- roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
- fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
- The
setSphericalProperties
function modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond toDeviceOrientationEvents
on supported mobile devices.
This example demonstrates and lets you test these new features.
June 19, 2017
This update contains the following changes:
-
Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.
August 11, 2016
This update contains the following changes:
-
The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog , provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms , which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms . In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.
June 29, 2016
This update contains the following changes:
-
The documentation has been corrected to note that the
onApiChange
method provides access to thecaptions
module and not thecc
module.
June 24, 2016
The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe>
element.
January 6, 2016
The clearVideo
function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy . We have added a notice of this requirement in our YouTube API Terms of Service .
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSeconds
property, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. -
The
getVideoStartBytes
method has been deprecated. The method now always returns a value of0
.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>
tag has been updated to include a closing</iframe>
tag since theonYouTubeIframeAPIReady
function is only called if the closing</iframe>
element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates
– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate
– Retrieve the playback rate for the cued or playing video.setPlaybackRate
– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange
– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFraction
method replaces the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods. The new method returns the percentage of the video that the player shows as buffered. -
The
onError
event may now return an error code of5
, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReady
function. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady
. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady
function and anonYouTubePlayerAPIReady
function, both functions will be called, and theonYouTubeIframeAPIReady
function will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api
. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api
) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()
anddestroy()
methods. ThesetSize()
method sets the size in pixels of the<iframe>
that contains the player and thedestroy()
method removes the<iframe>
.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimental
status from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>
element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>
element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe()
, which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.
আইফ্রেম প্লেয়ার এপিআই আপনাকে আপনার ওয়েবসাইটে একটি ইউটিউব ভিডিও প্লেয়ার এম্বেড করতে দেয় এবং জাভাস্ক্রিপ্ট ব্যবহার করে প্লেয়ারকে নিয়ন্ত্রণ করতে দেয়।
এপিআইয়ের জাভাস্ক্রিপ্ট ফাংশনগুলি ব্যবহার করে আপনি প্লেব্যাকের জন্য ভিডিও সারি করতে পারেন; খেলুন, বিরতি দিন বা সেই ভিডিওগুলি বন্ধ করুন; প্লেয়ারের ভলিউম সামঞ্জস্য করুন; বা ভিডিওটি বাজানো সম্পর্কে তথ্য পুনরুদ্ধার করুন। আপনি ইভেন্ট শ্রোতাদেরও যুক্ত করতে পারেন যা নির্দিষ্ট প্লেয়ার ইভেন্টগুলির প্রতিক্রিয়া হিসাবে যেমন প্লেয়ার স্টেট পরিবর্তনের প্রতিক্রিয়া হিসাবে কার্যকর করবে।
এই গাইডটি ইফ্রেম এপিআই কীভাবে ব্যবহার করবেন তা ব্যাখ্যা করে। এটি এপিআই প্রেরণ করতে পারে এমন বিভিন্ন ধরণের ইভেন্টগুলি চিহ্নিত করে এবং কীভাবে ইভেন্ট শ্রোতাদের সেই ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে লিখতে হয় তা ব্যাখ্যা করে। এটি ভিডিও প্লেয়ারকে নিয়ন্ত্রণ করতে কল করতে পারেন এমন বিভিন্ন জাভাস্ক্রিপ্ট ফাংশনগুলির পাশাপাশি প্লেয়ার প্যারামিটারগুলি আপনি প্লেয়ারকে আরও কাস্টমাইজ করতে ব্যবহার করতে পারেন এমনও বিশদ বিবরণ দেয়।
প্রয়োজনীয়তা
ব্যবহারকারীর ব্রাউজারটি অবশ্যই এইচটিএমএল 5 postMessage
বৈশিষ্ট্যটিকে সমর্থন করবে। বেশিরভাগ আধুনিক ব্রাউজারগুলি postMessage
সমর্থন করে।
Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
আইফ্রেম এপিআই ব্যবহার করে এমন কোনও ওয়েব পৃষ্ঠা অবশ্যই নিম্নলিখিত জাভাস্ক্রিপ্ট ফাংশনটি প্রয়োগ করতে হবে:
onYouTubeIframeAPIReady
- পৃষ্ঠাটি প্লেয়ার এপিআইয়ের জন্য জাভাস্ক্রিপ্টটি ডাউনলোড শেষ করার সময় এপিআই এই ফাংশনটি কল করবে, যা আপনাকে আপনার পৃষ্ঠায় এপিআই ব্যবহার করতে সক্ষম করে। সুতরাং, এই ফাংশনটি প্লেয়ার অবজেক্টগুলি তৈরি করতে পারে যা আপনি পৃষ্ঠাটি লোড করার সময় প্রদর্শন করতে চান।
শুরু হচ্ছে
নীচে নমুনা এইচটিএমএল পৃষ্ঠাটি একটি এম্বেড থাকা প্লেয়ার তৈরি করে যা একটি ভিডিও লোড করবে, ছয় সেকেন্ডের জন্য এটি খেলবে এবং তারপরে প্লেব্যাকটি বন্ধ করবে। এইচটিএমএলে সংখ্যাযুক্ত মন্তব্যগুলি উদাহরণের নীচের তালিকায় ব্যাখ্যা করা হয়েছে।
<!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
নিম্নলিখিত তালিকাটি উপরের নমুনা সম্পর্কে আরও বিশদ সরবরাহ করে:
এই বিভাগে
<div>
ট্যাগটি পৃষ্ঠার অবস্থানটি সনাক্ত করে যেখানে আইফ্রেম এপিআই ভিডিও প্লেয়ারটি রাখবে। প্লেয়ার অবজেক্টের কনস্ট্রাক্টর, যা কোনও ভিডিও প্লেয়ার বিভাগে লোডিংয়ে বর্ণিত হয়েছে, এপিআই<iframe>
কে যথাযথ স্থানে রাখে তা নিশ্চিত করার জন্য তারid
দ্বারা<div>
ট্যাগ চিহ্নিত করে। বিশেষত, আইফ্রেম এপিআই<div>
ট্যাগটি<iframe>
ট্যাগের সাথে প্রতিস্থাপন করবে।বিকল্প হিসাবে, আপনি সরাসরি পৃষ্ঠায়
<iframe>
উপাদানটি রাখতে পারেন। একটি ভিডিও প্লেয়ার বিভাগ লোড করা কীভাবে এটি করবেন তা ব্যাখ্যা করে।এই বিভাগের কোডটি আইফ্রেম প্লেয়ার এপিআই জাভাস্ক্রিপ্ট কোডটি লোড করে। উদাহরণটি API কোডটি ডাউনলোড করতে DOM পরিবর্তন ব্যবহার করে যাতে কোডটি অসাধারণভাবে পুনরুদ্ধার করা হয় তা নিশ্চিত করতে। (
<script>
ট্যাগেরasync
অ্যাট্রিবিউট, যা অ্যাসিঙ্ক্রোনাস ডাউনলোডগুলি সক্ষম করে, এখনও এই স্ট্যাক ওভারফ্লো উত্তরে আলোচিত সমস্ত আধুনিক ব্রাউজারগুলিতে সমর্থিত নয়।প্লেয়ার এপিআই কোড ডাউনলোড হওয়ার সাথে সাথে
onYouTubeIframeAPIReady
ফাংশনটি কার্যকর করবে। কোডের এই অংশটি একটি বিশ্বব্যাপী ভেরিয়েবল,player
সংজ্ঞায়িত করে, যা আপনি এম্বেড করছেন এমন ভিডিও প্লেয়ারকে বোঝায় এবং ফাংশনটি তারপরে ভিডিও প্লেয়ার অবজেক্টটি তৈরি করে।onPlayerReady
ফাংশনটি কার্যকর হবে যখনonReady
ইভেন্টটি আগুন লাগে। এই উদাহরণে, ফাংশনটি নির্দেশ করে যে ভিডিও প্লেয়ার প্রস্তুত হলে এটি খেলতে শুরু করা উচিত।প্লেয়ারের রাষ্ট্র পরিবর্তনের সময় এপিআই
onPlayerStateChange
ফাংশনটিকে কল করবে, যা ইঙ্গিত করতে পারে যে প্লেয়ার খেলছে, বিরতি দিচ্ছে, সমাপ্ত হয়েছে এবং আরও অনেক কিছু। ফাংশনটি ইঙ্গিত দেয় যে যখন প্লেয়ার স্টেট1
(বাজানো) হয়, তখন প্লেয়ারকে ছয় সেকেন্ডের জন্য খেলতে হবে এবং তারপরে ভিডিওটি বন্ধ করতেstopVideo
ফাংশনটিতে কল করা উচিত।
একটি ভিডিও প্লেয়ার লোড হচ্ছে
এপিআইয়ের জাভাস্ক্রিপ্ট কোড লোড হওয়ার পরে, এপিআই onYouTubeIframeAPIReady
ফাংশনটিকে কল করবে, যেখানে আপনি আপনার পৃষ্ঠায় একটি ভিডিও প্লেয়ার sert োকানোর জন্য একটি YT.Player
অবজেক্ট তৈরি করতে পারেন। নীচের এইচটিএমএল অংশটি উপরের উদাহরণ থেকে onYouTubeIframeAPIReady
ফাংশনটি দেখায়:
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
ভিডিও প্লেয়ারের কনস্ট্রাক্টর নিম্নলিখিত পরামিতিগুলি নির্দিষ্ট করে:
প্রথম প্যারামিটারটি ডিওএম উপাদান বা এইচটিএমএল উপাদানটির
id
নির্দিষ্ট করে যেখানে এপিআই প্লেয়ারযুক্ত<iframe>
ট্যাগটি সন্নিবেশ করবে।আইফ্রেম এপিআই নির্দিষ্ট উপাদানটিকে প্লেয়ারযুক্ত
<iframe>
উপাদানটির সাথে প্রতিস্থাপন করবে। এটি আপনার পৃষ্ঠার বিন্যাসকে প্রভাবিত করতে পারে যদি উপাদানটি প্রতিস্থাপন করা হচ্ছে তবে সন্নিবেশিত<iframe>
উপাদানটির চেয়ে আলাদা ডিসপ্লে স্টাইল থাকে। ডিফল্টরূপে, একটি<iframe>
একটিinline-block
উপাদান হিসাবে প্রদর্শিত হয়।- দ্বিতীয় প্যারামিটারটি এমন একটি বস্তু যা প্লেয়ার বিকল্পগুলি নির্দিষ্ট করে। অবজেক্টে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
-
width
(সংখ্যা) - ভিডিও প্লেয়ারের প্রস্থ। ডিফল্ট মান640
। -
height
(সংখ্যা) - ভিডিও প্লেয়ারের উচ্চতা। ডিফল্ট মান390
। -
videoId
(স্ট্রিং) - ইউটিউব ভিডিও আইডি যা প্লেয়ারটি লোড করবে এমন ভিডিওটি সনাক্ত করে। -
playerVars
(অবজেক্ট) - অবজেক্টের বৈশিষ্ট্যগুলি প্লেয়ার পরামিতিগুলি সনাক্ত করে যা প্লেয়ারকে কাস্টমাইজ করতে ব্যবহার করা যেতে পারে। -
events
(অবজেক্ট) - অবজেক্টের বৈশিষ্ট্যগুলি এপিআই ফায়ার করে এবং ফাংশনগুলি (ইভেন্ট শ্রোতা) যে ঘটনাগুলি ঘটে তা সনাক্ত করে যা এপিআই কল করবে। উদাহরণস্বরূপ, কনস্ট্রাক্টর ইঙ্গিত দেয় যেonPlayerReady
ফাংশনটি কার্যকর হবে যখনonReady
ইভেন্টটি আগুন লাগে এবংonStateChange
ইভেন্টটি ফায়ার করলে অনonPlayerStateChange
ফাংশনটি কার্যকর করবে।
-
শুরু করা বিভাগে যেমন উল্লেখ করা হয়েছে, আপনার পৃষ্ঠায় একটি খালি <div>
উপাদান লেখার পরিবর্তে, যা প্লেয়ার এপিআইয়ের জাভাস্ক্রিপ্ট কোডটি তখন একটি <iframe>
উপাদান দিয়ে প্রতিস্থাপন করবে, আপনি <iframe>
নিজেকে ট্যাগ তৈরি করতে পারেন। উদাহরণ বিভাগে প্রথম উদাহরণটি কীভাবে এটি করতে হয় তা দেখায়।
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>
মনে রাখবেন যে আপনি যদি <iframe>
ট্যাগটি লিখেন, তবে আপনি যখন YT.Player
অবজেক্টটি তৈরি করেন, আপনাকে width
এবং height
জন্য মানগুলি নির্দিষ্ট করার দরকার নেই, যা <iframe>
ট্যাগের বৈশিষ্ট্য হিসাবে নির্দিষ্ট করা হয়, বা videoId
এবং প্লেয়ার প্যারামিটারগুলি, যা src
ইউআরএলে নির্দিষ্ট করা হয়। অতিরিক্ত সুরক্ষা ব্যবস্থা হিসাবে, আপনার ইউআরএল -এর origin
প্যারামিটারটিও অন্তর্ভুক্ত করা উচিত, ইউআরএল স্কিম ( http://
বা https://
) এবং আপনার হোস্ট পৃষ্ঠার সম্পূর্ণ ডোমেনটি প্যারামিটার মান হিসাবে নির্দিষ্ট করে। যদিও origin
al চ্ছিক, এটি সহ আপনার পৃষ্ঠায় দূষিত তৃতীয় পক্ষের জাভাস্ক্রিপ্ট এবং আপনার ইউটিউব প্লেয়ারের হাইজ্যাকিং নিয়ন্ত্রণ থেকে ইনজেকশন দেওয়া থেকে রক্ষা করে।
ভিডিও প্লেয়ার অবজেক্টগুলি তৈরির অন্যান্য উদাহরণের জন্য, উদাহরণগুলি দেখুন।
অপারেশন
প্লেয়ার এপিআই পদ্ধতিগুলিকে কল করতে, আপনাকে প্রথমে আপনি যে প্লেয়ার অবজেক্টটি নিয়ন্ত্রণ করতে চান তার একটি রেফারেন্স পেতে হবে। আপনি এই দস্তাবেজের কোনও ভিডিও প্লেয়ার বিভাগগুলি শুরু করার জন্য এবং লোড করে আলোচিত হিসাবে একটি YT.Player
অবজেক্ট তৈরি করে রেফারেন্সটি পেয়েছেন।
ফাংশন
সারি ফাংশন
কুইং ফাংশনগুলি আপনাকে একটি ভিডিও, একটি প্লেলিস্ট বা ভিডিওর অন্য তালিকা লোড এবং খেলতে দেয়। আপনি যদি এই ফাংশনগুলি কল করতে নীচে বর্ণিত অবজেক্ট সিনট্যাক্স ব্যবহার করে থাকেন তবে আপনি কোনও ব্যবহারকারীর আপলোড হওয়া ভিডিওগুলির একটি তালিকা সারি বা লোড করতে পারেন।
এপিআই কুইং ফাংশনগুলি কল করার জন্য দুটি পৃথক সিনট্যাক্স সমর্থন করে।
আর্গুমেন্ট সিনট্যাক্সের জন্য একটি নির্ধারিত ক্রমে তালিকাভুক্ত ফাংশন আর্গুমেন্টগুলির প্রয়োজন।
অবজেক্ট সিনট্যাক্স আপনাকে একক প্যারামিটার হিসাবে কোনও অবজেক্টকে পাস করতে এবং আপনি যে ফাংশন যুক্তিগুলি সেট করতে চান তার জন্য অবজেক্টের বৈশিষ্ট্যগুলি সংজ্ঞায়িত করতে দেয়। তদ্ব্যতীত, এপিআই অতিরিক্ত কার্যকারিতা সমর্থন করতে পারে যা আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না।
উদাহরণস্বরূপ, loadVideoById
ফাংশনটি নিম্নলিখিত উভয় উপায়ে কল করা যেতে পারে। নোট করুন যে অবজেক্ট সিনট্যাক্স endSeconds
সম্পত্তি সমর্থন করে, যা আর্গুমেন্ট সিনট্যাক্স সমর্থন করে না।
আর্গুমেন্ট সিনট্যাক্স
loadVideoById("bHQqvYy5KYo", 5, "large")
অবজেক্ট সিনট্যাক্স
loadVideoById({'videoId': 'bHQqvYy5KYo', 'startSeconds': 5, 'endSeconds': 60});
ভিডিওগুলির জন্য সারি ফাংশন
-
cueVideoById
আর্গুমেন্ট সিনট্যাক্স
player.cueVideoById(videoId:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.cueVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওর থাম্বনেইল লোড করে এবং প্লেয়ারকে ভিডিওটি বাজানোর জন্য প্রস্তুত করে।
playVideo()
বাseekTo()
বলা না হওয়া পর্যন্ত প্লেয়ার এফএলভির অনুরোধ করে না।- প্রয়োজনীয়
videoId
প্যারামিটারটি ভিডিওটির ইউটিউব ভিডিও আইডি নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে, একটিvideo
রিসোর্সেরid
সম্পত্তি আইডি নির্দিষ্ট করে। - Al চ্ছিক
startSeconds
প্যারামিটারটি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
বলা হয় যখন ভিডিওটি বাজানো শুরু করা উচিত তা নির্দিষ্ট করে। যদি আপনি কোনওstartSeconds
মান নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবে প্লেয়ারটিseekTo()
কলটিতে উল্লিখিত সময় থেকে বাজায়। যখন ভিডিওটি উদ্ধৃত করা হয় এবং খেলতে প্রস্তুত হয়, তখন প্লেয়ার একটিvideo cued
ইভেন্ট (5
) সম্প্রচার করবে। - Al চ্ছিক
endSeconds
প্যারামিটার, যা কেবলমাত্র অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
বলা হয় যখন ভিডিওটি খেলা বন্ধ করা উচিত তখন নির্দিষ্ট করে দেয়। যদি আপনি কোনওendSeconds
মান নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবেendSeconds
মান আর কার্যকর হবে না।
loadVideoById
আর্গুমেন্ট সিনট্যাক্স
player.loadVideoById(videoId:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওটি লোড করে এবং বাজায়।
- প্রয়োজনীয়
videoId
প্যারামিটারটি ভিডিওটির ইউটিউব ভিডিও আইডি নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে, একটিvideo
রিসোর্সেরid
সম্পত্তি আইডি নির্দিষ্ট করে। - Al চ্ছিক
startSeconds
প্যারামিটার একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে। যদি এটি নির্দিষ্ট করা থাকে তবে ভিডিওটি নিকটতম কীফ্রেম থেকে নির্দিষ্ট সময় পর্যন্ত শুরু হবে। - Al চ্ছিক
endSeconds
প্যারামিটার একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে। যদি এটি নির্দিষ্ট করা থাকে তবে ভিডিওটি নির্দিষ্ট সময়ে খেলা বন্ধ করবে।
cueVideoByUrl
আর্গুমেন্ট সিনট্যাক্স
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.cueVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওর থাম্বনেইল লোড করে এবং প্লেয়ারকে ভিডিওটি বাজানোর জন্য প্রস্তুত করে।
playVideo()
বাseekTo()
বলা না হওয়া পর্যন্ত প্লেয়ার এফএলভির অনুরোধ করে না।- প্রয়োজনীয়
mediaContentUrl
প্যারামিটারটিhttp://www.youtube.com/v/VIDEO_ID?version=3
ফর্ম্যাটে সম্পূর্ণ যোগ্য ইউটিউব প্লেয়ার ইউআরএল নির্দিষ্ট করে। - Al চ্ছিক
startSeconds
প্যারামিটারটি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
বলা হয় যখন ভিডিওটি বাজানো শুরু করা উচিত তা নির্দিষ্ট করে। যদি আপনিstartSeconds
নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবে প্লেয়ারটিseekTo()
কলটিতে উল্লিখিত সময় থেকে বাজায়। যখন ভিডিওটি উদ্ধৃত করা হয় এবং খেলতে প্রস্তুত হয়, তখন প্লেয়ার একটিvideo cued
ইভেন্ট (5) সম্প্রচার করবে। - Al চ্ছিক
endSeconds
প্যারামিটার, যা কেবলমাত্র অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
বলা হয় যখন ভিডিওটি খেলা বন্ধ করা উচিত তখন নির্দিষ্ট করে দেয়। যদি আপনি কোনওendSeconds
মান নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবেendSeconds
মান আর কার্যকর হবে না।
loadVideoByUrl
আর্গুমেন্ট সিনট্যাক্স
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
অবজেক্ট সিনট্যাক্স
player.loadVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
এই ফাংশনটি নির্দিষ্ট ভিডিওটি লোড করে এবং বাজায়।
- প্রয়োজনীয়
mediaContentUrl
প্যারামিটারটিhttp://www.youtube.com/v/VIDEO_ID?version=3
ফর্ম্যাটে সম্পূর্ণ যোগ্য ইউটিউব প্লেয়ার ইউআরএল নির্দিষ্ট করে। - Al চ্ছিক
startSeconds
প্যারামিটারটি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবং ভিডিওটি যে সময়টি বাজানো শুরু করা উচিত তা নির্দিষ্ট করে। যদিstartSeconds
(সংখ্যাটি একটি ভাসমান হতে পারে) নির্দিষ্ট করা থাকে তবে ভিডিওটি নিকটতম কীফ্রেম থেকে নির্দিষ্ট সময় পর্যন্ত শুরু হবে। - Al চ্ছিক
endSeconds
প্যারামিটার, যা কেবল অবজেক্ট সিনট্যাক্সে সমর্থিত, একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবং ভিডিওটি যখন খেলা বন্ধ করা উচিত তখন নির্দিষ্ট করে দেয়।
তালিকার জন্য সারি ফাংশন
cuePlaylist
এবং loadPlaylist
ফাংশনগুলি আপনাকে একটি প্লেলিস্ট লোড এবং খেলতে দেয়। আপনি যদি এই ফাংশনগুলিকে কল করতে অবজেক্ট সিনট্যাক্স ব্যবহার করছেন তবে আপনি কোনও ব্যবহারকারীর আপলোড হওয়া ভিডিওগুলির একটি তালিকা সারি (বা লোড) করতে পারেন।
যেহেতু ফাংশনগুলি আর্গুমেন্ট সিনট্যাক্স বা অবজেক্ট সিনট্যাক্স ব্যবহার করে বলা হয় কিনা তার উপর নির্ভর করে আলাদাভাবে কাজ করে, উভয় কলিং পদ্ধতি নীচে নথিভুক্ত করা হয়।
-
cuePlaylist
আর্গুমেন্ট সিনট্যাক্স
নির্দিষ্ট প্লেলিস্ট সারি। যখন প্লেলিস্টটি উদ্ধৃত করা হয় এবং খেলতে প্রস্তুত হয়, তখন প্লেয়ার একটিplayer.cuePlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
video cued
ইভেন্ট (5
) সম্প্রচার করবে।প্রয়োজনীয়
playlist
প্যারামিটারটি ইউটিউব ভিডিও আইডির একটি অ্যারে নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে,video
রিসোর্সেরid
সম্পত্তি সেই ভিডিওটির আইডি সনাক্ত করে।Al চ্ছিক
index
প্যারামিটার প্লেলিস্টে প্রথম ভিডিওর সূচক নির্দিষ্ট করে যা খেলবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান0
হয়, সুতরাং ডিফল্ট আচরণটি প্লেলিস্টে প্রথম ভিডিওটি লোড এবং প্লে করা।Al চ্ছিক
startSeconds
প্যারামিটারটি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
ফাংশনটি বলা হয় যখন প্লেলিস্টের প্রথম ভিডিওটি বাজানো শুরু করা উচিত তা নির্দিষ্ট করে। যদি আপনি কোনওstartSeconds
মান নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবে প্লেয়ারটিseekTo()
কলটিতে উল্লিখিত সময় থেকে বাজায়। আপনি যদি কোনও প্লেলিস্টকে ইঙ্গিত করেন এবং তারপরেplayVideoAt()
ফাংশনটিতে কল করেন তবে প্লেয়ারটি নির্দিষ্ট ভিডিওর শুরুতে খেলতে শুরু করবে।
অবজেক্ট সিনট্যাক্স
ভিডিওগুলির নির্দিষ্ট তালিকা সারি করে। তালিকাটি প্লেলিস্ট বা কোনও ব্যবহারকারীর আপলোড করা ভিডিও ফিড হতে পারে। অনুসন্ধানের ফলাফলগুলির একটি তালিকা সারি করার ক্ষমতা হ্রাস করা হয়েছে এবংplayer.cuePlaylist({listType:String, list:String, index:Number, startSeconds:Number}):Void
15 নভেম্বর 2020 পর্যন্ত আর সমর্থন করা হবে না।যখন তালিকাটি উদ্ধৃত করা হয় এবং খেলতে প্রস্তুত হয়, তখন প্লেয়ার একটি
video cued
ইভেন্ট (5
) সম্প্রচার করবে।List চ্ছিক
listType
সম্পত্তি আপনি পুনরুদ্ধার করছেন এমন ফলাফলের ফিডের ধরণ নির্দিষ্ট করে। বৈধ মানগুলিplaylist
এবংuser_uploads
। একটি অবমূল্যায়িত মান,search
, আর15 নভেম্বর 2020 হিসাবে সমর্থন করা হবে না। ডিফল্ট মানplaylist
।প্রয়োজনীয়
list
সম্পত্তিটিতে একটি কী রয়েছে যা ইউটিউব ফিরে আসা উচিত এমন ভিডিওগুলির নির্দিষ্ট তালিকা সনাক্ত করে।- যদি
listType
সম্পত্তি মানplaylist
হয়, তবেlist
সম্পত্তি প্লেলিস্ট আইডি বা ভিডিও আইডির একটি অ্যারে নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে,playlist
রিসোর্সেরid
সম্পত্তি একটি প্লেলিস্টের আইডি সনাক্ত করে এবংvideo
রিসোর্সেরid
সম্পত্তি একটি ভিডিও আইডি নির্দিষ্ট করে। - যদি
listType
সম্পত্তি মানটিuser_uploads
হয়, তবেlist
সম্পত্তিটি ব্যবহারকারীকে চিহ্নিত করে যার আপলোড করা ভিডিওগুলি ফিরে আসবে। - যদি
listType
সম্পত্তি মানsearch
হয়, তবেlist
সম্পত্তি অনুসন্ধান ক্যোয়ারী নির্দিষ্ট করে। দ্রষ্টব্য: এই কার্যকারিতাটি হ্রাস করা হয়েছে এবং15 নভেম্বর 2020 হিসাবে আর সমর্থন করা হবে না।
- যদি
Al চ্ছিক
index
সম্পত্তি তালিকার প্রথম ভিডিওর সূচক নির্দিষ্ট করে যা খেলবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান0
হয়, সুতরাং ডিফল্ট আচরণটি তালিকার প্রথম ভিডিওটি লোড এবং প্লে করা।Al চ্ছিক
startSeconds
সম্পত্তি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবংplayVideo()
ফাংশনটি বলা হয় যখন তালিকার প্রথম ভিডিওটি বাজানো শুরু করা উচিত তা নির্দিষ্ট করে। যদি আপনি কোনওstartSeconds
মান নির্দিষ্ট করে থাকেন এবং তারপরেseekTo()
কল করুন, তবে প্লেয়ারটিseekTo()
কলটিতে উল্লিখিত সময় থেকে বাজায়। আপনি যদি কোনও তালিকা তৈরি করেন এবং তারপরেplayVideoAt()
ফাংশনটিতে কল করেন তবে প্লেয়ারটি নির্দিষ্ট ভিডিওর শুরুতে খেলতে শুরু করবে।
-
loadPlaylist
আর্গুমেন্ট সিনট্যাক্স
এই ফাংশনটি নির্দিষ্ট প্লেলিস্টটি লোড করে এবং এটি খেলে।player.loadPlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
প্রয়োজনীয়
playlist
প্যারামিটারটি ইউটিউব ভিডিও আইডির একটি অ্যারে নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে,video
রিসোর্সেরid
সম্পত্তি একটি ভিডিও আইডি নির্দিষ্ট করে।Al চ্ছিক
index
প্যারামিটার প্লেলিস্টে প্রথম ভিডিওর সূচক নির্দিষ্ট করে যা খেলবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান0
হয়, সুতরাং ডিফল্ট আচরণটি প্লেলিস্টে প্রথম ভিডিওটি লোড এবং প্লে করা।Al চ্ছিক
startSeconds
প্যারামিটারটি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবং সেই সময়টি নির্দিষ্ট করে যা থেকে প্লেলিস্টের প্রথম ভিডিওটি খেলা শুরু করা উচিত।
অবজেক্ট সিনট্যাক্স
এই ফাংশনটি নির্দিষ্ট তালিকাটি লোড করে এবং এটি বাজায়। তালিকাটি প্লেলিস্ট বা কোনও ব্যবহারকারীর আপলোড করা ভিডিও ফিড হতে পারে। অনুসন্ধানের ফলাফলগুলির একটি তালিকা লোড করার ক্ষমতা হ্রাস করা হয়েছে এবংplayer.loadPlaylist({list:String, listType:String, index:Number, startSeconds:Number}):Void
15 নভেম্বর 2020 পর্যন্ত আর সমর্থন করা হবে না।List চ্ছিক
listType
সম্পত্তি আপনি পুনরুদ্ধার করছেন এমন ফলাফলের ফিডের ধরণ নির্দিষ্ট করে। বৈধ মানগুলিplaylist
এবংuser_uploads
। একটি অবমূল্যায়িত মান,search
, আর15 নভেম্বর 2020 হিসাবে সমর্থন করা হবে না। ডিফল্ট মানplaylist
।প্রয়োজনীয়
list
সম্পত্তিটিতে একটি কী রয়েছে যা ইউটিউব ফিরে আসা উচিত এমন ভিডিওগুলির নির্দিষ্ট তালিকা সনাক্ত করে।- যদি
listType
সম্পত্তি মানplaylist
হয়, তবেlist
সম্পত্তিটি একটি প্লেলিস্ট আইডি বা ভিডিও আইডির একটি অ্যারে নির্দিষ্ট করে। ইউটিউব ডেটা এপিআইতে,playlist
রিসোর্সেরid
সম্পত্তি একটি প্লেলিস্টের আইডি নির্দিষ্ট করে এবংvideo
রিসোর্সেরid
সম্পত্তি একটি ভিডিও আইডি নির্দিষ্ট করে। - যদি
listType
সম্পত্তি মানটিuser_uploads
হয়, তবেlist
সম্পত্তিটি ব্যবহারকারীকে চিহ্নিত করে যার আপলোড করা ভিডিওগুলি ফিরে আসবে। - যদি
listType
সম্পত্তি মানsearch
হয়, তবেlist
সম্পত্তি অনুসন্ধান ক্যোয়ারী নির্দিষ্ট করে। দ্রষ্টব্য: এই কার্যকারিতাটি হ্রাস করা হয়েছে এবং15 নভেম্বর 2020 হিসাবে আর সমর্থন করা হবে না।
- যদি
Al চ্ছিক
index
সম্পত্তি তালিকার প্রথম ভিডিওর সূচক নির্দিষ্ট করে যা খেলবে। প্যারামিটারটি একটি শূন্য-ভিত্তিক সূচক ব্যবহার করে এবং ডিফল্ট প্যারামিটার মান0
হয়, সুতরাং ডিফল্ট আচরণটি তালিকার প্রথম ভিডিওটি লোড এবং প্লে করা।Al চ্ছিক
startSeconds
সম্পত্তি একটি ভাসমান/পূর্ণসংখ্যা গ্রহণ করে এবং তালিকার প্রথম ভিডিওটি বাজানো শুরু করা উচিত এমন সময় নির্দিষ্ট করে।
প্লেব্যাক নিয়ন্ত্রণ এবং প্লেয়ার সেটিংস
একটি ভিডিও চালানো হচ্ছে
-
player. playVideo ():Void
- বর্তমানে ক্রুইড/লোড হওয়া ভিডিও বাজায়। এই ফাংশন কার্যকর করার পরে চূড়ান্ত প্লেয়ার রাষ্ট্রটি
playing
(1)।
দ্রষ্টব্য: একটি প্লেব্যাক কেবল কোনও ভিডিওর অফিসিয়াল ভিউ গণনার দিকে গণনা করে যদি এটি প্লেয়ারের কোনও স্থানীয় প্লে বোতামের মাধ্যমে শুরু করা হয়।
-
player. pauseVideo ():Void
- বর্তমানে বাজানো ভিডিও বিরতি দেয়। এই ফাংশন কার্যকর করার পরে চূড়ান্ত প্লেয়ার রাষ্ট্রটি
paused
হবে (2
) যদি প্লেয়ারটিended
থাকে (0
) রাজ্যে ফাংশনটি ডাকা হয়, সেক্ষেত্রে প্লেয়ার রাজ্য পরিবর্তন হবে না।
-
player. stopVideo ():Void
- বর্তমান ভিডিওটির লোডিং বন্ধ এবং বাতিল করে। এই ফাংশনটি বিরল পরিস্থিতিতে সংরক্ষণ করা উচিত যখন আপনি জানেন যে ব্যবহারকারী প্লেয়ারটিতে অতিরিক্ত ভিডিও দেখবেন না। যদি আপনার উদ্দেশ্যটি ভিডিওটি বিরতি দেয় তবে আপনার কেবল
pauseVideo
ফাংশনটি কল করা উচিত। প্লেয়ারটি যে ভিডিওটি খেলছে তা যদি আপনি পরিবর্তন করতে চান তবে আপনিstopVideo
প্রথমে কল না করে একটি কুইং ফাংশনগুলিতে কল করতে পারেন।
গুরুত্বপূর্ণ:pauseVideo
ফাংশনের বিপরীতে, যা প্লেয়ারকেpaused
(2
) রাজ্যে ছেড়ে দেয়,stopVideo
ফাংশন প্লেয়ারকেended
(0
),paused
(2
),video cued
(5
) বাunstarted
(-1
)।
-
player. seekTo (seconds:Number, allowSeekAhead:Boolean):Void
- ভিডিওতে একটি নির্দিষ্ট সময় সন্ধান করে। যদি ফাংশনটি ডাকা হয় তখন যদি প্লেয়ারটি বিরতি দেওয়া হয় তবে এটি বিরতি থাকবে। যদি ফাংশনটি অন্য রাজ্য থেকে ডাকা হয় (
playing
,video cued
ইত্যাদি), প্লেয়ারটি ভিডিওটি বাজবে।seconds
প্যারামিটারটি প্লেয়ারকে যে সময়টি অগ্রসর হওয়া উচিত তা চিহ্নিত করে।প্লেয়ার সেই সময়ের আগে নিকটতম কীফ্রেমে এগিয়ে যাবে যদি না প্লেয়ার ইতিমধ্যে ব্যবহারকারী যে ভিডিওটির সন্ধান করছে তার অংশটি ডাউনলোড না করে।
allowSeekAhead
প্যারামিটারটি নির্ধারণ করে যে প্লেয়ারটি সার্ভারে কোনও নতুন অনুরোধ করবে কিনা যদিseconds
প্যারামিটারটি বর্তমানে বাফারযুক্ত ভিডিও ডেটার বাইরে একটি সময় নির্দিষ্ট করে।আমরা আপনাকে সুপারিশ করি যে আপনি এই প্যারামিটারটি
false
হিসাবে সেট করুন যখন ব্যবহারকারী একটি ভিডিও প্রগতিশীল বারের সাথে মাউসটি টেনে নিয়ে যায় এবং তারপরে ব্যবহারকারী যখন মাউসটি প্রকাশ করে তখন এটিtrue
সেট করে। এই পদ্ধতিটি কোনও ব্যবহারকারীকে ভিডিওতে অতীতের অবিচ্ছিন্ন পয়েন্টগুলি স্ক্রোল করে নতুন ভিডিও স্ট্রিমের অনুরোধ না করে কোনও ভিডিওর বিভিন্ন পয়েন্টে স্ক্রোল করতে দেয়। ব্যবহারকারী যখন মাউস বোতামটি প্রকাশ করেন, প্লেয়ারটি ভিডিওর পছন্দসই পয়েন্টে অগ্রসর হয় এবং প্রয়োজনে একটি নতুন ভিডিও স্ট্রিমের জন্য অনুরোধ করে।
360 ° ভিডিওর প্লেব্যাক নিয়ন্ত্রণ করা
দ্রষ্টব্য: 360 ° ভিডিও প্লেব্যাক অভিজ্ঞতার মোবাইল ডিভাইসে সীমিত সমর্থন রয়েছে। অসমর্থিত ডিভাইসগুলিতে, 360 ° ভিডিওগুলি বিকৃত প্রদর্শিত হয় এবং এপিআইয়ের মাধ্যমে, ওরিয়েন্টেশন সেন্সরগুলি ব্যবহার করে, বা ডিভাইসের স্ক্রিনে স্পর্শ/টেনে আনার প্রতিক্রিয়া জানানোর ক্ষেত্রে দেখার দৃষ্টিভঙ্গি পরিবর্তন করার কোনও সমর্থিত উপায় নেই।
-
player. getSphericalProperties ():Object
- ভিডিও প্লেব্যাকের জন্য দর্শকের বর্তমান দৃষ্টিভঙ্গি বা ভিউ বর্ণনা করে এমন বৈশিষ্ট্যগুলি পুনরুদ্ধার করে। উপরন্তু:
- এই অবজেক্টটি কেবল 360 ° ভিডিওর জন্য জনবহুল, যা গোলাকার ভিডিওও বলা হয়।
- যদি বর্তমান ভিডিওটি কোনও 360 ° ভিডিও না হয় বা যদি ফাংশনটিকে কোনও সমর্থিত ডিভাইস থেকে ডাকা হয় তবে ফাংশনটি একটি খালি অবজেক্টটি ফেরত দেয়।
- সমর্থিত মোবাইল ডিভাইসগুলিতে, যদি
enableOrientationSensor
সংস্থাগুলিtrue
সেট করা থাকে, তবে এই ফাংশনটি এমন একটি বস্তু ফেরত দেয় যাতেfov
সম্পত্তিটিতে সঠিক মান থাকে এবং অন্যান্য বৈশিষ্ট্যগুলি0
এ সেট করা থাকে।
বৈশিষ্ট্য yaw
পরিসীমা [0, 360) এর একটি সংখ্যা যা ডিগ্রিগুলিতে দৃশ্যের অনুভূমিক কোণকে উপস্থাপন করে, যা ব্যবহারকারী আরও বাম বা ডানদিকে মুখোমুখি হওয়ার জন্য ভিউটি কীভাবে ঘুরিয়ে দেয় তা প্রতিফলিত করে। ভিডিওটির কেন্দ্রস্থলটি তার ইকুয়ারেক্টাঙ্গুলার প্রক্ষেপণে মুখোমুখি নিরপেক্ষ অবস্থানটি 0 ° প্রতিনিধিত্ব করে এবং দর্শক বাম দিকে ঘুরতে এই মানটি বৃদ্ধি পায়। pitch
পরিসীমা [-৯০, ৯০] এর একটি সংখ্যা যা ডিগ্রিগুলিতে দৃশ্যের উল্লম্ব কোণকে উপস্থাপন করে, যা ব্যবহারকারীকে কতটা উপরে বা নীচে দেখার জন্য ভিউটি সামঞ্জস্য করে তা প্রতিফলিত করে। ভিডিওটির কেন্দ্রস্থলটি তার ইকুয়ারেক্টাঙ্গুলার প্রক্ষেপণে মুখোমুখি নিরপেক্ষ অবস্থানটি 0 ° উপস্থাপন করে এবং দর্শকের সন্ধান করার সাথে সাথে এই মানটি বৃদ্ধি পায়। roll
পরিসীমা [-180, 180] এর একটি সংখ্যা যা ডিগ্রিগুলিতে ঘড়ির কাঁটার দিকে বা ঘড়ির কাঁটার বিপরীতে ঘূর্ণন কোণকে উপস্থাপন করে। নিরপেক্ষ অবস্থান, ইকুইরেক্টাঙ্গুলার প্রক্ষেপণে অনুভূমিক অক্ষের সাথে দৃশ্যের অনুভূমিক অক্ষের সমান্তরাল, 0 ° উপস্থাপন করে ° দৃশ্যটি ঘড়ির কাঁটার দিকে ঘোরার সাথে সাথে মানটি বৃদ্ধি পায় এবং দৃশ্যটি ঘড়ির কাঁটার দিকে ঘোরার সাথে সাথে হ্রাস পায়।
নোট করুন যে এম্বেড থাকা প্লেয়ারটি ভিউয়ের রোলটি সামঞ্জস্য করার জন্য কোনও ব্যবহারকারী ইন্টারফেস উপস্থাপন করে না। এই পারস্পরিক একচেটিয়া উপায়ে রোলটি সামঞ্জস্য করা যেতে পারে:- দেখার জন্য রোল সরবরাহ করতে একটি মোবাইল ব্রাউজারে ওরিয়েন্টেশন সেন্সরটি ব্যবহার করুন। যদি ওরিয়েন্টেশন সেন্সর সক্ষম করা থাকে, তবে
getSphericalProperties
ফাংশন সর্বদাroll
সম্পত্তিটির মান হিসাবে0
ফিরে আসে। - যদি ওরিয়েন্টেশন সেন্সরটি অক্ষম থাকে তবে এই এপিআই ব্যবহার করে রোলটি একটি ননজারো মানতে সেট করুন।
fov
পরিসীমা [30, 120] এর একটি সংখ্যা যা ভিউপোর্টের দীর্ঘ প্রান্তে পরিমাপ করা হিসাবে ডিগ্রিগুলিতে ভিউয়ের ক্ষেত্রের ভিউ উপস্থাপন করে। সংক্ষিপ্ত প্রান্তটি স্বয়ংক্রিয়ভাবে ভিউয়ের দিক অনুপাতের সাথে সমানুপাতিক হতে সামঞ্জস্য করা হয়।
ডিফল্ট মান 100 ডিগ্রি। মান হ্রাস করা ভিডিও বিষয়বস্তুতে জুম করার মতো এবং মান বাড়ানো জুম আউট করার মতো। এই মানটি এপিআই ব্যবহার করে বা ভিডিওটি ফুলস্ক্রিন মোডে থাকলে মাউসওয়েল ব্যবহার করে সামঞ্জস্য করা যায়।
-
player. setSphericalProperties (properties:Object):Void
- একটি 360 ° ভিডিওর প্লেব্যাকের জন্য ভিডিও ওরিয়েন্টেশন সেট করে। (যদি বর্তমান ভিডিওটি গোলাকার না হয় তবে পদ্ধতিটি ইনপুট নির্বিশেষে কোনও নো-অপ)))
প্লেয়ার ভিউproperties
অবজেক্টের কোনও পরিচিত বৈশিষ্ট্যের মানগুলি প্রতিফলিত করতে আপডেট করে এই পদ্ধতিতে কলগুলিতে প্রতিক্রিয়া জানায়। দৃশ্যটি সেই বস্তুর অন্তর্ভুক্ত নয় এমন কোনও পরিচিত বৈশিষ্ট্যগুলির জন্য মানগুলি বজায় রাখে।
উপরন্তু:- যদি অবজেক্টটিতে অজানা এবং/অথবা অপ্রত্যাশিত বৈশিষ্ট্য থাকে তবে প্লেয়ার সেগুলি উপেক্ষা করে।
- এই বিভাগের শুরুতে উল্লিখিত হিসাবে, 360 ° ভিডিও প্লেব্যাক অভিজ্ঞতা সমস্ত মোবাইল ডিভাইসে সমর্থিত নয়।
- ডিফল্টরূপে, সমর্থিত মোবাইল ডিভাইসগুলিতে, এই ফাংশনটি কেবল
fov
সম্পত্তি সেট করে এবংyaw
,pitch
এবং 360 ° ভিডিও প্লেব্যাকগুলির জন্যroll
বৈশিষ্ট্যগুলিকে প্রভাবিত করে না। See theenableOrientationSensor
property below for more detail.
properties
object passed to the function contains the following properties:বৈশিষ্ট্য yaw
See definition above. pitch
See definition above. roll
See definition above. fov
See definition above. enableOrientationSensor
Note: This property affects the 360° viewing experience on supported devices only. A boolean value that indicates whether the IFrame embed should respond to events that signal changes in a supported device's orientation, such as a mobile browser's DeviceOrientationEvent
. The default parameter value istrue
.
Supported mobile devices- When the value is
true
, an embedded player relies only on the device's movement to adjust theyaw
,pitch
, androll
properties for 360° video playbacks. However, thefov
property can still be changed via the API, and the API is, in fact, the only way to change thefov
property on a mobile device. এটি ডিফল্ট আচরণ। - When the value is
false
, then the device's movement does not affect the 360° viewing experience, and theyaw
,pitch
,roll
, andfov
properties must all be set via the API.
Unsupported mobile devices
TheenableOrientationSensor
property value does not have any effect on the playback experience.
Playing a video in a playlist
-
player. nextVideo ():Void
- This function loads and plays the next video in the playlist.
If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the first video in the list.If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is not set to play continuously, then playback will end.
-
player. previousVideo ():Void
- This function loads and plays the previous video in the playlist.
If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the last video in the list.If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is not set to play continuously, then the player will restart the first playlist video from the beginning.
-
player. playVideoAt (index:Number):Void
- This function loads and plays the specified video in the playlist.
The required
index
parameter specifies the index of the video that you want to play in the playlist. The parameter uses a zero-based index, so a value of0
identifies the first video in the list. If you have shuffled the playlist, this function will play the video at the specified position in the shuffled playlist.
Changing the player volume
-
player. mute ():Void
- Mutes the player.
-
player. unMute ():Void
- Unmutes the player.
-
player. isMuted ():Boolean
- Returns
true
if the player is muted,false
if not.
-
player. setVolume (volume:Number):Void
- Sets the volume. Accepts an integer between
0
and100
.
-
player. getVolume ():Number
- Returns the player's current volume, an integer between
0
and100
. Note thatgetVolume()
will return the volume even if the player is muted.
Setting the player size
-
player.setSize(width:Number, height:Number):Object
- Sets the size in pixels of the
<iframe>
that contains the player.
Setting the playback rate
-
player. getPlaybackRate ():Number
- This function retrieves the playback rate of the currently playing video. The default playback rate is
1
, which indicates that the video is playing at normal speed. Playback rates may include values like0.25
,0.5
,1
,1.5
, and2
.
-
player. setPlaybackRate (suggestedRate:Number):Void
- This function sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played. If you set the playback rate for a cued video, that rate will still be in effect when the
playVideo
function is called or the user initiates playback directly through the player controls. In addition, calling functions to cue or load videos or playlists (cueVideoById
,loadVideoById
, etc.) will reset the playback rate to1
.
Calling this function does not guarantee that the playback rate will actually change. However, if the playback rate does change, theonPlaybackRateChange
event will fire, and your code should respond to the event rather than the fact that it called thesetPlaybackRate
function.
ThegetAvailablePlaybackRates
method will return the possible playback rates for the currently playing video. However, if you set thesuggestedRate
parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of1
.
-
player. getAvailablePlaybackRates ():Array
- This function returns the set of playback rates in which the current video is available. The default value is
1
, which indicates that the video is playing in normal speed.
The function returns an array of numbers ordered from slowest to fastest playback speed. Even if the player does not support variable playback speeds, the array should always contain at least one value (1
).
Setting playback behavior for playlists
-
player. setLoop (loopPlaylists:Boolean):Void
This function indicates whether the video player should continuously play a playlist or if it should stop playing after the last video in the playlist ends. The default behavior is that playlists do not loop.
This setting will persist even if you load or cue a different playlist, which means that if you load a playlist, call the
setLoop
function with a value oftrue
, and then load a second playlist, the second playlist will also loop.The required
loopPlaylists
parameter identifies the looping behavior.If the parameter value is
true
, then the video player will continuously play playlists. After playing the last video in a playlist, the video player will go back to the beginning of the playlist and play it again.If the parameter value is
false
, then playbacks will end after the video player plays the last video in a playlist.
-
player. setShuffle (shufflePlaylist:Boolean):Void
This function indicates whether a playlist's videos should be shuffled so that they play back in an order different from the one that the playlist creator designated. If you shuffle a playlist after it has already started playing, the list will be reordered while the video that is playing continues to play. The next video that plays will then be selected based on the reordered list.
This setting will not persist if you load or cue a different playlist, which means that if you load a playlist, call the
setShuffle
function, and then load a second playlist, the second playlist will not be shuffled.The required
shufflePlaylist
parameter indicates whether YouTube should shuffle the playlist.If the parameter value is
true
, then YouTube will shuffle the playlist order. If you instruct the function to shuffle a playlist that has already been shuffled, YouTube will shuffle the order again.If the parameter value is
false
, then YouTube will change the playlist order back to its original order.
Playback status
-
player. getVideoLoadedFraction ():Float
- Returns a number between
0
and1
that specifies the percentage of the video that the player shows as buffered. This method returns a more reliable number than the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods.
-
player.getPlayerState():Number
- Returns the state of the player. সম্ভাব্য মান হল:
-
-1
– unstarted -
0
– ended -
1
– playing -
2
– paused -
3
– buffering -
5
– video cued
-
-
player. getCurrentTime ():Number
- Returns the elapsed time in seconds since the video started playing.
-
player. getVideoStartBytes ():Number
- Deprecated as of October 31, 2012. Returns the number of bytes the video file started loading from. (This method now always returns a value of
0
.) Example scenario: the user seeks ahead to a point that hasn't loaded yet, and the player makes a new request to play a segment of the video that hasn't loaded yet.
-
player. getVideoBytesLoaded ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
This method returns a value between0
and1000
that approximates the amount of the video that has been loaded. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
-
player. getVideoBytesTotal ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
Returns the size in bytes of the currently loaded/playing video or an approximation of the video's size.
This method always returns a value of1000
. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
Retrieving video information
-
player. getDuration ():Number
- Returns the duration in seconds of the currently playing video. Note that
getDuration()
will return0
until the video's metadata is loaded, which normally happens just after the video starts playing.
If the currently playing video is a live event , thegetDuration()
function will return the elapsed time since the live video stream began. Specifically, this is the amount of time that the video has streamed without being reset or interrupted. In addition, this duration is commonly longer than the actual event time since streaming may begin before the event's start time.
-
player. getVideoUrl ():String
- Returns the YouTube.com URL for the currently loaded/playing video.
-
player. getVideoEmbedCode ():String
- Returns the embed code for the currently loaded/playing video.
Retrieving playlist information
-
player. getPlaylist ():Array
- This function returns an array of the video IDs in the playlist as they are currently ordered. By default, this function will return video IDs in the order designated by the playlist owner. However, if you have called the
setShuffle
function to shuffle the playlist order, then thegetPlaylist()
function's return value will reflect the shuffled order.
-
player. getPlaylistIndex ():Number
- This function returns the index of the playlist video that is currently playing.
If you have not shuffled the playlist, the return value will identify the position where the playlist creator placed the video. The return value uses a zero-based index, so a value of
0
identifies the first video in the playlist.If you have shuffled the playlist, the return value will identify the video's order within the shuffled playlist.
Adding or removing an event listener
-
player. addEventListener (event:String, listener:String):Void
- Adds a listener function for the specified
event
. The Events section below identifies the different events that the player might fire. The listener is a string that specifies the function that will execute when the specified event fires.
-
player. removeEventListener (event:String, listener:String):Void
- Removes a listener function for the specified
event
. Thelistener
is a string that identifies the function that will no longer execute when the specified event fires.
Accessing and modifying DOM nodes
-
player. getIframe ():Object
- This method returns the DOM node for the embedded
<iframe>
.
-
player. destroy ():Void
- Removes the
<iframe>
containing the player.
ঘটনা
The API fires events to notify your application of changes to the embedded player. As noted in the previous section, you can subscribe to events by adding an event listener when constructing the YT.Player
object , and you can also use the addEventListener
function.
The API will pass an event object as the sole argument to each of those functions. The event object has the following properties:
- The event's
target
identifies the video player that corresponds to the event. - The event's
data
specifies a value relevant to the event. Note that theonReady
andonAutoplayBlocked
events do not specify adata
property.
The following list defines the events that the API fires:
-
onReady
- This event fires whenever a player has finished loading and is ready to begin receiving API calls. Your application should implement this function if you want to automatically execute certain operations, such as playing the video or displaying information about the video, as soon as the player is ready.
The example below shows a sample function for handling this event. The event object that the API passes to the function has atarget
property, which identifies the player. The function retrieves the embed code for the currently loaded video, starts to play the video, and displays the embed code in the page element that has anid
value ofembed-code
.function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
-
onStateChange
- This event fires whenever the player's state changes. The
data
property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. সম্ভাব্য মান হল:-
-1
(unstarted) -
0
(ended) -
1
(playing) -
2
(paused) -
3
(buffering) -
5
(video cued).
unstarted
(-1
) event. When a video is cued and ready to play, the player will broadcast avideo cued
(5
) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:-
YT.PlayerState.ENDED
-
YT.PlayerState.PLAYING
-
YT.PlayerState.PAUSED
-
YT.PlayerState.BUFFERING
-
YT.PlayerState.CUED
-
-
onPlaybackQualityChange
- This event fires whenever the video playback quality changes. It might signal a change in the viewer's playback environment. See the YouTube Help Center for more information about factors that affect playback conditions or that might cause the event to fire.
Thedata
property value of the event object that the API passes to the event listener function will be a string that identifies the new playback quality. সম্ভাব্য মান হল:-
small
-
medium
-
large
-
hd720
-
hd1080
-
highres
-
-
onPlaybackRateChange
- This event fires whenever the video playback rate changes. For example, if you call the
setPlaybackRate(suggestedRate)
function, this event will fire if the playback rate actually changes. Your application should respond to the event and should not assume that the playback rate will automatically change when thesetPlaybackRate(suggestedRate)
function is called. Similarly, your code should not assume that the video playback rate will only change as a result of an explicit call tosetPlaybackRate
.
Thedata
property value of the event object that the API passes to the event listener function will be a number that identifies the new playback rate. ThegetAvailablePlaybackRates
method returns a list of the valid playback rates for the currently cued or playing video.
-
onError
- This event fires if an error occurs in the player. The API will pass an
event
object to the event listener function. That object'sdata
property will specify an integer that identifies the type of error that occurred. সম্ভাব্য মান হল:-
2
– The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks. -
5
– The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
100
– The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private. -
101
– The owner of the requested video does not allow it to be played in embedded players. -
150
– This error is the same as101
. It's just a101
error in disguise!
-
-
onApiChange
- This event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods. Your application can listen for this event and then poll the player to determine which options are exposed for the recently loaded module. Your application can then retrieve or update the existing settings for those options.
The following command retrieves an array of module names for which you can set player options: Currently, the only module that you can set options for is theplayer.getOptions();
captions
module, which handles closed captioning in the player. Upon receiving anonApiChange
event, your application can use the following command to determine which options can be set for thecaptions
module: By polling the player with this command, you can confirm that the options you want to access are, indeed, accessible. The following commands retrieve and update module options:player.getOptions('captions');
The table below lists the options that the API supports:Retrieving an option: player.getOption(module, option); Setting an option player.setOption(module, option, value);
মডিউল অপশন বর্ণনা captions fontSize This option adjusts the font size of the captions displayed in the player.
Valid values are-1
,0
,1
,2
, and3
. The default size is0
, and the smallest size is-1
. Setting this option to an integer below-1
will cause the smallest caption size to display, while setting this option to an integer above3
will cause the largest caption size to display.captions reload This option reloads the closed caption data for the video that is playing. The value will be null
if you retrieve the option's value. Set the value totrue
to reload the closed caption data.
-
onAutoplayBlocked
- This event fires any time the browser blocks autoplay or scripted video playback features, collectively referred to as "autoplay". This includes playback attempted with any of the following player APIs:
-
autoplay
parameter -
loadPlaylist
function -
loadVideoById
function -
loadVideoByUrl
function -
playVideo
function
For complete details, refer to browser-specific policies ( Apple Safari / Webkit , Google Chrome , Mozilla Firefox ) and Mozilla's autoplay guide . -
উদাহরণ
Creating YT.Player
objects
Example 1: Use API with existing <iframe>
In this example, an
<iframe>
element on the page already defines the player with which the API will be used. Note that either the player'ssrc
URL must set theenablejsapi
parameter to1
or the<iframe>
element'senablejsapi
attribute must be set totrue
.The
onPlayerReady
function changes the color of the border around the player to orange when the player is ready. TheonPlayerStateChange
function then changes the color of the border around the player based on the current player status. For example, the color is green when the player is playing, red when paused, blue when buffering, and so forth.This example uses the following code:
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('existing-iframe-example', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; } function changeBorderColor(playerStatus) { var color; if (playerStatus == -1) { color = "#37474F"; // unstarted = gray } else if (playerStatus == 0) { color = "#FFFF00"; // ended = yellow } else if (playerStatus == 1) { color = "#33691E"; // playing = green } else if (playerStatus == 2) { color = "#DD2C00"; // paused = red } else if (playerStatus == 3) { color = "#AA00FF"; // buffering = purple } else if (playerStatus == 5) { color = "#FF6DOO"; // video cued = orange } if (color) { document.getElementById('existing-iframe-example').style.borderColor = color; } } function onPlayerStateChange(event) { changeBorderColor(event.data); } </script>
Example 2: Loud playback
This example creates a 1280px by 720px video player. The event listener for the
onReady
event then calls thesetVolume
function to adjust the volume to the highest setting.function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); }
Example 3: This example sets player parameters to automatically play the video when it loads and to hide the video player's controls. It also adds event listeners for several events that the API broadcasts.
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
Controlling 360° videos
This example uses the following code:
<style> .current-values { color: #666; font-size: 12px; } </style> <!-- The player is inserted in the following div element --> <div id="spherical-video-player"></div> <!-- Display spherical property values and enable user to update them. --> <table style="border: 0; width: 640px;"> <tr style="background: #fff;"> <td> <label for="yaw-property">yaw: </label> <input type="text" id="yaw-property" style="width: 80px"><br> <div id="yaw-current-value" class="current-values"> </div> </td> <td> <label for="pitch-property">pitch: </label> <input type="text" id="pitch-property" style="width: 80px"><br> <div id="pitch-current-value" class="current-values"> </div> </td> <td> <label for="roll-property">roll: </label> <input type="text" id="roll-property" style="width: 80px"><br> <div id="roll-current-value" class="current-values"> </div> </td> <td> <label for="fov-property">fov: </label> <input type="text" id="fov-property" style="width: 80px"><br> <div id="fov-current-value" class="current-values"> </div> </td> <td style="vertical-align: bottom;"> <button id="spherical-properties-button">Update properties</button> </td> </tr> </table> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov']; var updateButton = document.getElementById('spherical-properties-button'); // Create the YouTube Player. var ytplayer; function onYouTubeIframeAPIReady() { ytplayer = new YT.Player('spherical-video-player', { height: '360', width: '640', videoId: 'FAtdv94yzp4', }); } // Don't display current spherical settings because there aren't any. function hideCurrentSettings() { for (var p = 0; p < PROPERTIES.length; p++) { document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = ''; } } // Retrieve current spherical property values from the API and display them. function updateSetting() { if (!ytplayer || !ytplayer.getSphericalProperties) { hideCurrentSettings(); } else { let newSettings = ytplayer.getSphericalProperties(); if (Object.keys(newSettings).length === 0) { hideCurrentSettings(); } else { for (var p = 0; p < PROPERTIES.length; p++) { if (newSettings.hasOwnProperty(PROPERTIES[p])) { currentValueNode = document.getElementById(PROPERTIES[p] + '-current-value'); currentValueNode.innerHTML = ('current: ' + newSettings[PROPERTIES[p]].toFixed(4)); } } } } requestAnimationFrame(updateSetting); } updateSetting(); // Call the API to update spherical property values. updateButton.onclick = function() { var sphericalProperties = {}; for (var p = 0; p < PROPERTIES.length; p++) { var propertyInput = document.getElementById(PROPERTIES[p] + '-property'); sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value); } ytplayer.setSphericalProperties(sphericalProperties); } </script>
Android WebView Media Integrity API integration
YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube. The data collected through usage of this API is the app metadata (the package name, version number, and signing certificate) and a device attestation token generated by Google Play services.
The data is used to verify the application and device integrity. It is encrypted, not shared with third parties, and deleted following a fixed retention period. App developers can configure their app identity in the WebView Media Integrity API. The configuration supports an opt-out option.
পুনর্বিবেচনার ইতিহাস
June 24, 2024
The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.
November 20, 2023
The new onAutoplayBlocked
event API is now available.
This event notifies your application if the browser blocks autoplay or scripted playback.
Verification of autoplay success or failure is an
established paradigm
for HTMLMediaElements, and the onAutoplayBlocked
event now provides similar
functionality for the IFrame Player API.
April 27, 2021
The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars
object to customize the player.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the IFrame Player API's queueing functions for lists ,
cuePlaylist
and
loadPlaylist
.
This change will become effective on or after cuePlaylist
or loadPlaylist
functions that set the listType
property to search
will generate a 4xx
response code, such as
404
( Not Found
) or 410
( Gone
). This change
also affects the list
property for those functions as that property no longer
supports the ability to specify a search query.
As an alternative, you can use the YouTube Data API's
search.list
method to retrieve search
results and then load selected videos in the player.
October 24, 2019
The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article , to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.
The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:
- The
getPlaybackQuality
,setPlaybackQuality
, andgetAvailableQualityLevels
functions are no longer supported. In particular, calls tosetPlaybackQuality
will be no-op functions, meaning they will not actually have any impact on the viewer's playback experience. - The queueing functions for videos and playlists --
cueVideoById
,loadVideoById
, etc. -- no longer support thesuggestedQuality
argument. Similarly, if you call those functions using object syntax, thesuggestedQuality
field is no longer supported. IfsuggestedQuality
is specified, it will be ignored when the request is handled. It will not generate any warnings or errors. - The
onPlaybackQualityChange
event is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.
May 16, 2018
The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos :
- The
getSphericalProperties
function retrieves the current orientation for the video playback. The orientation includes the following data:- yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
- pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
- roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
- fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
- The
setSphericalProperties
function modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond toDeviceOrientationEvents
on supported mobile devices.
This example demonstrates and lets you test these new features.
June 19, 2017
This update contains the following changes:
-
Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.
August 11, 2016
This update contains the following changes:
-
The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog , provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms , which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms . In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.
June 29, 2016
This update contains the following changes:
-
The documentation has been corrected to note that the
onApiChange
method provides access to thecaptions
module and not thecc
module.
June 24, 2016
The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe>
element.
January 6, 2016
The clearVideo
function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy . We have added a notice of this requirement in our YouTube API Terms of Service .
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSeconds
property, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. -
The
getVideoStartBytes
method has been deprecated. The method now always returns a value of0
.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>
tag has been updated to include a closing</iframe>
tag since theonYouTubeIframeAPIReady
function is only called if the closing</iframe>
element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates
– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate
– Retrieve the playback rate for the cued or playing video.setPlaybackRate
– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange
– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFraction
method replaces the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods. The new method returns the percentage of the video that the player shows as buffered. -
The
onError
event may now return an error code of5
, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReady
function. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady
. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady
function and anonYouTubePlayerAPIReady
function, both functions will be called, and theonYouTubeIframeAPIReady
function will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api
. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api
) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()
anddestroy()
methods. ThesetSize()
method sets the size in pixels of the<iframe>
that contains the player and thedestroy()
method removes the<iframe>
.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimental
status from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>
element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>
element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe()
, which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.
Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change.
This guide explains how to use the IFrame API. It identifies the different types of events that the API can send and explains how to write event listeners to respond to those events. It also details the different JavaScript functions that you can call to control the video player as well as the player parameters you can use to further customize the player.
প্রয়োজনীয়তা
The user's browser must support the HTML5 postMessage
feature. Most modern browsers support postMessage
.
Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
Any web page that uses the IFrame API must also implement the following JavaScript function:
onYouTubeIframeAPIReady
– The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.
শুরু হচ্ছে
The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. The numbered comments in the HTML are explained in the list below the example.
<!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
The following list provides more details about the sample above:
The
<div>
tag in this section identifies the location on the page where the IFrame API will place the video player. The constructor for the player object, which is described in the Loading a video player section, identifies the<div>
tag by itsid
to ensure that the API places the<iframe>
in the proper location. Specifically, the IFrame API will replace the<div>
tag with the<iframe>
tag.As an alternative, you could also put the
<iframe>
element directly on the page. The Loading a video player section explains how to do so.The code in this section loads the IFrame Player API JavaScript code. The example uses DOM modification to download the API code to ensure that the code is retrieved asynchronously. (The
<script>
tag'sasync
attribute, which also enables asynchronous downloads, is not yet supported in all modern browsers as discussed in this Stack Overflow answer .The
onYouTubeIframeAPIReady
function will execute as soon as the player API code downloads. This portion of the code defines a global variable,player
, which refers to the video player you are embedding, and the function then constructs the video player object.The
onPlayerReady
function will execute when theonReady
event fires. In this example, the function indicates that when the video player is ready, it should begin to play.The API will call the
onPlayerStateChange
function when the player's state changes, which may indicate that the player is playing, paused, finished, and so forth. The function indicates that when the player state is1
(playing), the player should play for six seconds and then call thestopVideo
function to stop the video.
Loading a video player
After the API's JavaScript code loads, the API will call the onYouTubeIframeAPIReady
function, at which point you can construct a YT.Player
object to insert a video player on your page. The HTML excerpt below shows the onYouTubeIframeAPIReady
function from the example above:
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
The constructor for the video player specifies the following parameters:
The first parameter specifies either the DOM element or the
id
of the HTML element where the API will insert the<iframe>
tag containing the player.The IFrame API will replace the specified element with the
<iframe>
element containing the player. This could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.- The second parameter is an object that specifies player options. The object contains the following properties:
-
width
(number) – The width of the video player. The default value is640
. -
height
(number) – The height of the video player. The default value is390
. -
videoId
(string) – The YouTube video ID that identifies the video that the player will load. -
playerVars
(object) – The object's properties identify player parameters that can be used to customize the player. -
events
(object) – The object's properties identify the events that the API fires and the functions (event listeners) that the API will call when those events occur. In the example, the constructor indicates that theonPlayerReady
function will execute when theonReady
event fires and that theonPlayerStateChange
function will execute when theonStateChange
event fires.
-
As mentioned in the Getting started section, instead of writing an empty <div>
element on your page, which the player API's JavaScript code will then replace with an <iframe>
element, you could create the <iframe>
tag yourself. The first example in the Examples section shows how to do this.
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>
Note that if you do write the <iframe>
tag, then when you construct the YT.Player
object, you do not need to specify values for the width
and height
, which are specified as attributes of the <iframe>
tag, or the videoId
and player parameters, which are are specified in the src
URL. As an extra security measure, you should also include the origin
parameter to the URL, specifying the URL scheme ( http://
or https://
) and full domain of your host page as the parameter value. While origin
is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.
For other examples on constructing video player objects, see Examples .
অপারেশন
To call the player API methods, you must first get a reference to the player object you wish to control. You obtain the reference by creating a YT.Player
object as discussed in the Getting started and Loading a video player sections of this document.
ফাংশন
Queueing functions
Queueing functions allow you to load and play a video, a playlist, or another list of videos. If you are using the object syntax described below to call these functions, then you can also queue or load a list of a user's uploaded videos.
The API supports two different syntaxes for calling the queueing functions.
The argument syntax requires function arguments to be listed in a prescribed order.
The object syntax lets you pass an object as a single parameter and to define object properties for the function arguments that you wish to set. In addition, the API may support additional functionality that the argument syntax does not support.
For example, the loadVideoById
function can be called in either of the following ways. Note that the object syntax supports the endSeconds
property, which the argument syntax does not support.
Argument syntax
loadVideoById("bHQqvYy5KYo", 5, "large")
Object syntax
loadVideoById({'videoId': 'bHQqvYy5KYo', 'startSeconds': 5, 'endSeconds': 60});
Queueing functions for videos
-
cueVideoById
Argument syntax
player.cueVideoById(videoId:String, startSeconds:Number):Void
Object syntax
player.cueVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
This function loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until
playVideo()
orseekTo()
is called.- The required
videoId
parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, avideo
resource'sid
property specifies the ID. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing whenplayVideo()
is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. When the video is cued and ready to play, the player will broadcast avideo cued
event (5
). - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. If you specify anendSeconds
value and then callseekTo()
, theendSeconds
value will no longer be in effect.
loadVideoById
Argument syntax
player.loadVideoById(videoId:String, startSeconds:Number):Void
Object syntax
player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
This function loads and plays the specified video.
- The required
videoId
parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, avideo
resource'sid
property specifies the ID. - The optional
startSeconds
parameter accepts a float/integer. If it is specified, then the video will start from the closest keyframe to the specified time. - The optional
endSeconds
parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.
cueVideoByUrl
Argument syntax
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Object syntax
player.cueVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
This function loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until
playVideo()
orseekTo()
is called.- The required
mediaContentUrl
parameter specifies a fully qualified YouTube player URL in the formathttp://www.youtube.com/v/VIDEO_ID?version=3
. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing whenplayVideo()
is called. If you specifystartSeconds
and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. When the video is cued and ready to play, the player will broadcast avideo cued
event (5). - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. If you specify anendSeconds
value and then callseekTo()
, theendSeconds
value will no longer be in effect.
loadVideoByUrl
Argument syntax
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Object syntax
player.loadVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
This function loads and plays the specified video.
- The required
mediaContentUrl
parameter specifies a fully qualified YouTube player URL in the formathttp://www.youtube.com/v/VIDEO_ID?version=3
. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing. IfstartSeconds
(number can be a float) is specified, the video will start from the closest keyframe to the specified time. - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing.
Queueing functions for lists
The cuePlaylist
and loadPlaylist
functions allow you to load and play a playlist. If you are using object syntax to call these functions, you can also queue (or load) a list of a user's uploaded videos.
Since the functions work differently depending on whether they are called using the argument syntax or the object syntax, both calling methods are documented below.
-
cuePlaylist
Argument syntax
Queues the specified playlist. When the playlist is cued and ready to play, the player will broadcast aplayer.cuePlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
video cued
event (5
).The required
playlist
parameter specifies an array of YouTube video IDs. In the YouTube Data API, thevideo
resource'sid
property identifies that video's ID.The optional
index
parameter specifies the index of the first video in the playlist that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the playlist.The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the first video in the playlist should start playing when theplayVideo()
function is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. If you cue a playlist and then call theplayVideoAt()
function, the player will start playing at the beginning of the specified video.
Object syntax
Queues the specified list of videos. The list can be a playlist or a user's uploaded videos feed. The ability to queue a list of search results is deprecated and will no longer be supported as ofplayer.cuePlaylist({listType:String, list:String, index:Number, startSeconds:Number}):Void
15 November 2020 .When the list is cued and ready to play, the player will broadcast a
video cued
event (5
).The optional
listType
property specifies the type of results feed that you are retrieving. Valid values areplaylist
anduser_uploads
. A deprecated value,search
, will no longer be supported as of15 November 2020 . The default value isplaylist
.The required
list
property contains a key that identifies the particular list of videos that YouTube should return.- If the
listType
property value isplaylist
, then thelist
property specifies the playlist ID or an array of video IDs. In the YouTube Data API, theplaylist
resource'sid
property identifies a playlist's ID, and thevideo
resource'sid
property specifies a video ID. - If the
listType
property value isuser_uploads
, then thelist
property identifies the user whose uploaded videos will be returned. - If the
listType
property value issearch
, then thelist
property specifies the search query. Note: This functionality is deprecated and will no longer be supported as of15 November 2020 .
- If the
The optional
index
property specifies the index of the first video in the list that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the list.The optional
startSeconds
property accepts a float/integer and specifies the time from which the first video in the list should start playing when theplayVideo()
function is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. If you cue a list and then call theplayVideoAt()
function, the player will start playing at the beginning of the specified video.
-
loadPlaylist
Argument syntax
This function loads the specified playlist and plays it.player.loadPlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
The required
playlist
parameter specifies an array of YouTube video IDs. In the YouTube Data API, thevideo
resource'sid
property specifies a video ID.The optional
index
parameter specifies the index of the first video in the playlist that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the playlist.The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the first video in the playlist should start playing.
Object syntax
This function loads the specified list and plays it. The list can be a playlist or a user's uploaded videos feed. The ability to load a list of search results is deprecated and will no longer be supported as ofplayer.loadPlaylist({list:String, listType:String, index:Number, startSeconds:Number}):Void
15 November 2020 .The optional
listType
property specifies the type of results feed that you are retrieving. Valid values areplaylist
anduser_uploads
. A deprecated value,search
, will no longer be supported as of15 November 2020 . The default value isplaylist
.The required
list
property contains a key that identifies the particular list of videos that YouTube should return.- If the
listType
property value isplaylist
, then thelist
property specifies a playlist ID or an array of video IDs. In the YouTube Data API, theplaylist
resource'sid
property specifies a playlist's ID, and thevideo
resource'sid
property specifies a video ID. - If the
listType
property value isuser_uploads
, then thelist
property identifies the user whose uploaded videos will be returned. - If the
listType
property value issearch
, then thelist
property specifies the search query. Note: This functionality is deprecated and will no longer be supported as of15 November 2020 .
- If the
The optional
index
property specifies the index of the first video in the list that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the list.The optional
startSeconds
property accepts a float/integer and specifies the time from which the first video in the list should start playing.
Playback controls and player settings
একটি ভিডিও চালানো হচ্ছে
-
player. playVideo ():Void
- Plays the currently cued/loaded video. The final player state after this function executes will be
playing
(1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
-
player. pauseVideo ():Void
- Pauses the currently playing video. The final player state after this function executes will be
paused
(2
) unless the player is in theended
(0
) state when the function is called, in which case the player state will not change.
-
player. stopVideo ():Void
- Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the
pauseVideo
function. If you want to change the video that the player is playing, you can call one of the queueing functions without callingstopVideo
first.
Important: Unlike thepauseVideo
function, which leaves the player in thepaused
(2
) state, thestopVideo
function could put the player into any not-playing state, includingended
(0
),paused
(2
),video cued
(5
) orunstarted
(-1
).
-
player. seekTo (seconds:Number, allowSeekAhead:Boolean):Void
- Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (
playing
,video cued
, etc.), the player will play the video.The
seconds
parameter identifies the time to which the player should advance.The player will advance to the closest keyframe before that time unless the player has already downloaded the portion of the video to which the user is seeking.
The
allowSeekAhead
parameter determines whether the player will make a new request to the server if theseconds
parameter specifies a time outside of the currently buffered video data.We recommend that you set this parameter to
false
while the user drags the mouse along a video progress bar and then set it totrue
when the user releases the mouse. This approach lets a user scroll to different points of a video without requesting new video streams by scrolling past unbuffered points in the video. When the user releases the mouse button, the player advances to the desired point in the video and requests a new video stream if necessary.
Controlling playback of 360° videos
Note: The 360° video playback experience has limited support on mobile devices. On unsupported devices, 360° videos appear distorted and there is no supported way to change the viewing perspective at all, including through the API, using orientation sensors, or responding to touch/drag actions on the device's screen.
-
player. getSphericalProperties ():Object
- Retrieves properties that describe the viewer's current perspective, or view, for a video playback. উপরন্তু:
- This object is only populated for 360° videos, which are also called spherical videos.
- If the current video is not a 360° video or if the function is called from a non-supported device, then the function returns an empty object.
- On supported mobile devices, if the
enableOrientationSensor
property is set totrue
, then this function returns an object in which thefov
property contains the correct value and the other properties are set to0
.
বৈশিষ্ট্য yaw
A number in the range [0, 360) that represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right. The neutral position, facing the center of the video in its equirectangular projection, represents 0°, and this value increases as the viewer turns left. pitch
A number in the range [-90, 90] that represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down. The neutral position, facing the center of the video in its equirectangular projection, represents 0°, and this value increases as the viewer looks up. roll
A number in the range [-180, 180] that represents the clockwise or counterclockwise rotational angle of the view in degrees. The neutral position, with the horizontal axis in the equirectangular projection being parallel to the horizontal axis of the view, represents 0°. The value increases as the view rotates clockwise and decreases as the view rotates counterclockwise.
Note that the embedded player does not present a user interface for adjusting the roll of the view. The roll can be adjusted in either of these mutually exclusive ways:- Use the orientation sensor in a mobile browser to provide roll for the view. If the orientation sensor is enabled, then the
getSphericalProperties
function always returns0
as the value of theroll
property. - If the orientation sensor is disabled, set the roll to a nonzero value using this API.
fov
A number in the range [30, 120] that represents the field-of-view of the view in degrees as measured along the longer edge of the viewport. The shorter edge is automatically adjusted to be proportional to the aspect ratio of the view.
The default value is 100 degrees. Decreasing the value is like zooming in on the video content, and increasing the value is like zooming out. This value can be adjusted either by using the API or by using the mousewheel when the video is in fullscreen mode.
-
player. setSphericalProperties (properties:Object):Void
- Sets the video orientation for playback of a 360° video. (If the current video is not spherical, the method is a no-op regardless of the input.)
The player view responds to calls to this method by updating to reflect the values of any known properties in theproperties
object. The view persists values for any other known properties not included in that object.
উপরন্তু:- If the object contains unknown and/or unexpected properties, the player ignores them.
- As noted at the beginning of this section, the 360° video playback experience is not supported on all mobile devices.
- By default, on supported mobile devices, this function sets only sets the
fov
property and does not affect theyaw
,pitch
, androll
properties for 360° video playbacks. See theenableOrientationSensor
property below for more detail.
properties
object passed to the function contains the following properties:বৈশিষ্ট্য yaw
See definition above. pitch
See definition above. roll
See definition above. fov
See definition above. enableOrientationSensor
Note: This property affects the 360° viewing experience on supported devices only. A boolean value that indicates whether the IFrame embed should respond to events that signal changes in a supported device's orientation, such as a mobile browser's DeviceOrientationEvent
. The default parameter value istrue
.
Supported mobile devices- When the value is
true
, an embedded player relies only on the device's movement to adjust theyaw
,pitch
, androll
properties for 360° video playbacks. However, thefov
property can still be changed via the API, and the API is, in fact, the only way to change thefov
property on a mobile device. এটি ডিফল্ট আচরণ। - When the value is
false
, then the device's movement does not affect the 360° viewing experience, and theyaw
,pitch
,roll
, andfov
properties must all be set via the API.
Unsupported mobile devices
TheenableOrientationSensor
property value does not have any effect on the playback experience.
Playing a video in a playlist
-
player. nextVideo ():Void
- This function loads and plays the next video in the playlist.
If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the first video in the list.If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is not set to play continuously, then playback will end.
-
player. previousVideo ():Void
- This function loads and plays the previous video in the playlist.
If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the last video in the list.If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is not set to play continuously, then the player will restart the first playlist video from the beginning.
-
player. playVideoAt (index:Number):Void
- This function loads and plays the specified video in the playlist.
The required
index
parameter specifies the index of the video that you want to play in the playlist. The parameter uses a zero-based index, so a value of0
identifies the first video in the list. If you have shuffled the playlist, this function will play the video at the specified position in the shuffled playlist.
Changing the player volume
-
player. mute ():Void
- Mutes the player.
-
player. unMute ():Void
- Unmutes the player.
-
player. isMuted ():Boolean
- Returns
true
if the player is muted,false
if not.
-
player. setVolume (volume:Number):Void
- Sets the volume. Accepts an integer between
0
and100
.
-
player. getVolume ():Number
- Returns the player's current volume, an integer between
0
and100
. Note thatgetVolume()
will return the volume even if the player is muted.
Setting the player size
-
player.setSize(width:Number, height:Number):Object
- Sets the size in pixels of the
<iframe>
that contains the player.
Setting the playback rate
-
player. getPlaybackRate ():Number
- This function retrieves the playback rate of the currently playing video. The default playback rate is
1
, which indicates that the video is playing at normal speed. Playback rates may include values like0.25
,0.5
,1
,1.5
, and2
.
-
player. setPlaybackRate (suggestedRate:Number):Void
- This function sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played. If you set the playback rate for a cued video, that rate will still be in effect when the
playVideo
function is called or the user initiates playback directly through the player controls. In addition, calling functions to cue or load videos or playlists (cueVideoById
,loadVideoById
, etc.) will reset the playback rate to1
.
Calling this function does not guarantee that the playback rate will actually change. However, if the playback rate does change, theonPlaybackRateChange
event will fire, and your code should respond to the event rather than the fact that it called thesetPlaybackRate
function.
ThegetAvailablePlaybackRates
method will return the possible playback rates for the currently playing video. However, if you set thesuggestedRate
parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of1
.
-
player. getAvailablePlaybackRates ():Array
- This function returns the set of playback rates in which the current video is available. The default value is
1
, which indicates that the video is playing in normal speed.
The function returns an array of numbers ordered from slowest to fastest playback speed. Even if the player does not support variable playback speeds, the array should always contain at least one value (1
).
Setting playback behavior for playlists
-
player. setLoop (loopPlaylists:Boolean):Void
This function indicates whether the video player should continuously play a playlist or if it should stop playing after the last video in the playlist ends. The default behavior is that playlists do not loop.
This setting will persist even if you load or cue a different playlist, which means that if you load a playlist, call the
setLoop
function with a value oftrue
, and then load a second playlist, the second playlist will also loop.The required
loopPlaylists
parameter identifies the looping behavior.If the parameter value is
true
, then the video player will continuously play playlists. After playing the last video in a playlist, the video player will go back to the beginning of the playlist and play it again.If the parameter value is
false
, then playbacks will end after the video player plays the last video in a playlist.
-
player. setShuffle (shufflePlaylist:Boolean):Void
This function indicates whether a playlist's videos should be shuffled so that they play back in an order different from the one that the playlist creator designated. If you shuffle a playlist after it has already started playing, the list will be reordered while the video that is playing continues to play. The next video that plays will then be selected based on the reordered list.
This setting will not persist if you load or cue a different playlist, which means that if you load a playlist, call the
setShuffle
function, and then load a second playlist, the second playlist will not be shuffled.The required
shufflePlaylist
parameter indicates whether YouTube should shuffle the playlist.If the parameter value is
true
, then YouTube will shuffle the playlist order. If you instruct the function to shuffle a playlist that has already been shuffled, YouTube will shuffle the order again.If the parameter value is
false
, then YouTube will change the playlist order back to its original order.
Playback status
-
player. getVideoLoadedFraction ():Float
- Returns a number between
0
and1
that specifies the percentage of the video that the player shows as buffered. This method returns a more reliable number than the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods.
-
player.getPlayerState():Number
- Returns the state of the player. সম্ভাব্য মান হল:
-
-1
– unstarted -
0
– ended -
1
– playing -
2
– paused -
3
– buffering -
5
– video cued
-
-
player. getCurrentTime ():Number
- Returns the elapsed time in seconds since the video started playing.
-
player. getVideoStartBytes ():Number
- Deprecated as of October 31, 2012. Returns the number of bytes the video file started loading from. (This method now always returns a value of
0
.) Example scenario: the user seeks ahead to a point that hasn't loaded yet, and the player makes a new request to play a segment of the video that hasn't loaded yet.
-
player. getVideoBytesLoaded ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
This method returns a value between0
and1000
that approximates the amount of the video that has been loaded. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
-
player. getVideoBytesTotal ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
Returns the size in bytes of the currently loaded/playing video or an approximation of the video's size.
This method always returns a value of1000
. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
Retrieving video information
-
player. getDuration ():Number
- Returns the duration in seconds of the currently playing video. Note that
getDuration()
will return0
until the video's metadata is loaded, which normally happens just after the video starts playing.
If the currently playing video is a live event , thegetDuration()
function will return the elapsed time since the live video stream began. Specifically, this is the amount of time that the video has streamed without being reset or interrupted. In addition, this duration is commonly longer than the actual event time since streaming may begin before the event's start time.
-
player. getVideoUrl ():String
- Returns the YouTube.com URL for the currently loaded/playing video.
-
player. getVideoEmbedCode ():String
- Returns the embed code for the currently loaded/playing video.
Retrieving playlist information
-
player. getPlaylist ():Array
- This function returns an array of the video IDs in the playlist as they are currently ordered. By default, this function will return video IDs in the order designated by the playlist owner. However, if you have called the
setShuffle
function to shuffle the playlist order, then thegetPlaylist()
function's return value will reflect the shuffled order.
-
player. getPlaylistIndex ():Number
- This function returns the index of the playlist video that is currently playing.
If you have not shuffled the playlist, the return value will identify the position where the playlist creator placed the video. The return value uses a zero-based index, so a value of
0
identifies the first video in the playlist.If you have shuffled the playlist, the return value will identify the video's order within the shuffled playlist.
Adding or removing an event listener
-
player. addEventListener (event:String, listener:String):Void
- Adds a listener function for the specified
event
. The Events section below identifies the different events that the player might fire. The listener is a string that specifies the function that will execute when the specified event fires.
-
player. removeEventListener (event:String, listener:String):Void
- Removes a listener function for the specified
event
. Thelistener
is a string that identifies the function that will no longer execute when the specified event fires.
Accessing and modifying DOM nodes
-
player. getIframe ():Object
- This method returns the DOM node for the embedded
<iframe>
.
-
player. destroy ():Void
- Removes the
<iframe>
containing the player.
ঘটনা
The API fires events to notify your application of changes to the embedded player. As noted in the previous section, you can subscribe to events by adding an event listener when constructing the YT.Player
object , and you can also use the addEventListener
function.
The API will pass an event object as the sole argument to each of those functions. The event object has the following properties:
- The event's
target
identifies the video player that corresponds to the event. - The event's
data
specifies a value relevant to the event. Note that theonReady
andonAutoplayBlocked
events do not specify adata
property.
The following list defines the events that the API fires:
-
onReady
- This event fires whenever a player has finished loading and is ready to begin receiving API calls. Your application should implement this function if you want to automatically execute certain operations, such as playing the video or displaying information about the video, as soon as the player is ready.
The example below shows a sample function for handling this event. The event object that the API passes to the function has atarget
property, which identifies the player. The function retrieves the embed code for the currently loaded video, starts to play the video, and displays the embed code in the page element that has anid
value ofembed-code
.function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
-
onStateChange
- This event fires whenever the player's state changes. The
data
property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. সম্ভাব্য মান হল:-
-1
(unstarted) -
0
(ended) -
1
(playing) -
2
(paused) -
3
(buffering) -
5
(video cued).
unstarted
(-1
) event. When a video is cued and ready to play, the player will broadcast avideo cued
(5
) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:-
YT.PlayerState.ENDED
-
YT.PlayerState.PLAYING
-
YT.PlayerState.PAUSED
-
YT.PlayerState.BUFFERING
-
YT.PlayerState.CUED
-
-
onPlaybackQualityChange
- This event fires whenever the video playback quality changes. It might signal a change in the viewer's playback environment. See the YouTube Help Center for more information about factors that affect playback conditions or that might cause the event to fire.
Thedata
property value of the event object that the API passes to the event listener function will be a string that identifies the new playback quality. সম্ভাব্য মান হল:-
small
-
medium
-
large
-
hd720
-
hd1080
-
highres
-
-
onPlaybackRateChange
- This event fires whenever the video playback rate changes. For example, if you call the
setPlaybackRate(suggestedRate)
function, this event will fire if the playback rate actually changes. Your application should respond to the event and should not assume that the playback rate will automatically change when thesetPlaybackRate(suggestedRate)
function is called. Similarly, your code should not assume that the video playback rate will only change as a result of an explicit call tosetPlaybackRate
.
Thedata
property value of the event object that the API passes to the event listener function will be a number that identifies the new playback rate. ThegetAvailablePlaybackRates
method returns a list of the valid playback rates for the currently cued or playing video.
-
onError
- This event fires if an error occurs in the player. The API will pass an
event
object to the event listener function. That object'sdata
property will specify an integer that identifies the type of error that occurred. সম্ভাব্য মান হল:-
2
– The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks. -
5
– The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
100
– The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private. -
101
– The owner of the requested video does not allow it to be played in embedded players. -
150
– This error is the same as101
. It's just a101
error in disguise!
-
-
onApiChange
- This event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods. Your application can listen for this event and then poll the player to determine which options are exposed for the recently loaded module. Your application can then retrieve or update the existing settings for those options.
The following command retrieves an array of module names for which you can set player options: Currently, the only module that you can set options for is theplayer.getOptions();
captions
module, which handles closed captioning in the player. Upon receiving anonApiChange
event, your application can use the following command to determine which options can be set for thecaptions
module: By polling the player with this command, you can confirm that the options you want to access are, indeed, accessible. The following commands retrieve and update module options:player.getOptions('captions');
The table below lists the options that the API supports:Retrieving an option: player.getOption(module, option); Setting an option player.setOption(module, option, value);
মডিউল অপশন বর্ণনা captions fontSize This option adjusts the font size of the captions displayed in the player.
Valid values are-1
,0
,1
,2
, and3
. The default size is0
, and the smallest size is-1
. Setting this option to an integer below-1
will cause the smallest caption size to display, while setting this option to an integer above3
will cause the largest caption size to display.captions reload This option reloads the closed caption data for the video that is playing. The value will be null
if you retrieve the option's value. Set the value totrue
to reload the closed caption data.
-
onAutoplayBlocked
- This event fires any time the browser blocks autoplay or scripted video playback features, collectively referred to as "autoplay". This includes playback attempted with any of the following player APIs:
-
autoplay
parameter -
loadPlaylist
function -
loadVideoById
function -
loadVideoByUrl
function -
playVideo
function
For complete details, refer to browser-specific policies ( Apple Safari / Webkit , Google Chrome , Mozilla Firefox ) and Mozilla's autoplay guide . -
উদাহরণ
Creating YT.Player
objects
Example 1: Use API with existing <iframe>
In this example, an
<iframe>
element on the page already defines the player with which the API will be used. Note that either the player'ssrc
URL must set theenablejsapi
parameter to1
or the<iframe>
element'senablejsapi
attribute must be set totrue
.The
onPlayerReady
function changes the color of the border around the player to orange when the player is ready. TheonPlayerStateChange
function then changes the color of the border around the player based on the current player status. For example, the color is green when the player is playing, red when paused, blue when buffering, and so forth.This example uses the following code:
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('existing-iframe-example', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; } function changeBorderColor(playerStatus) { var color; if (playerStatus == -1) { color = "#37474F"; // unstarted = gray } else if (playerStatus == 0) { color = "#FFFF00"; // ended = yellow } else if (playerStatus == 1) { color = "#33691E"; // playing = green } else if (playerStatus == 2) { color = "#DD2C00"; // paused = red } else if (playerStatus == 3) { color = "#AA00FF"; // buffering = purple } else if (playerStatus == 5) { color = "#FF6DOO"; // video cued = orange } if (color) { document.getElementById('existing-iframe-example').style.borderColor = color; } } function onPlayerStateChange(event) { changeBorderColor(event.data); } </script>
Example 2: Loud playback
This example creates a 1280px by 720px video player. The event listener for the
onReady
event then calls thesetVolume
function to adjust the volume to the highest setting.function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); }
Example 3: This example sets player parameters to automatically play the video when it loads and to hide the video player's controls. It also adds event listeners for several events that the API broadcasts.
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
Controlling 360° videos
This example uses the following code:
<style> .current-values { color: #666; font-size: 12px; } </style> <!-- The player is inserted in the following div element --> <div id="spherical-video-player"></div> <!-- Display spherical property values and enable user to update them. --> <table style="border: 0; width: 640px;"> <tr style="background: #fff;"> <td> <label for="yaw-property">yaw: </label> <input type="text" id="yaw-property" style="width: 80px"><br> <div id="yaw-current-value" class="current-values"> </div> </td> <td> <label for="pitch-property">pitch: </label> <input type="text" id="pitch-property" style="width: 80px"><br> <div id="pitch-current-value" class="current-values"> </div> </td> <td> <label for="roll-property">roll: </label> <input type="text" id="roll-property" style="width: 80px"><br> <div id="roll-current-value" class="current-values"> </div> </td> <td> <label for="fov-property">fov: </label> <input type="text" id="fov-property" style="width: 80px"><br> <div id="fov-current-value" class="current-values"> </div> </td> <td style="vertical-align: bottom;"> <button id="spherical-properties-button">Update properties</button> </td> </tr> </table> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov']; var updateButton = document.getElementById('spherical-properties-button'); // Create the YouTube Player. var ytplayer; function onYouTubeIframeAPIReady() { ytplayer = new YT.Player('spherical-video-player', { height: '360', width: '640', videoId: 'FAtdv94yzp4', }); } // Don't display current spherical settings because there aren't any. function hideCurrentSettings() { for (var p = 0; p < PROPERTIES.length; p++) { document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = ''; } } // Retrieve current spherical property values from the API and display them. function updateSetting() { if (!ytplayer || !ytplayer.getSphericalProperties) { hideCurrentSettings(); } else { let newSettings = ytplayer.getSphericalProperties(); if (Object.keys(newSettings).length === 0) { hideCurrentSettings(); } else { for (var p = 0; p < PROPERTIES.length; p++) { if (newSettings.hasOwnProperty(PROPERTIES[p])) { currentValueNode = document.getElementById(PROPERTIES[p] + '-current-value'); currentValueNode.innerHTML = ('current: ' + newSettings[PROPERTIES[p]].toFixed(4)); } } } } requestAnimationFrame(updateSetting); } updateSetting(); // Call the API to update spherical property values. updateButton.onclick = function() { var sphericalProperties = {}; for (var p = 0; p < PROPERTIES.length; p++) { var propertyInput = document.getElementById(PROPERTIES[p] + '-property'); sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value); } ytplayer.setSphericalProperties(sphericalProperties); } </script>
Android WebView Media Integrity API integration
YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube. The data collected through usage of this API is the app metadata (the package name, version number, and signing certificate) and a device attestation token generated by Google Play services.
The data is used to verify the application and device integrity. It is encrypted, not shared with third parties, and deleted following a fixed retention period. App developers can configure their app identity in the WebView Media Integrity API. The configuration supports an opt-out option.
পুনর্বিবেচনার ইতিহাস
June 24, 2024
The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.
November 20, 2023
The new onAutoplayBlocked
event API is now available.
This event notifies your application if the browser blocks autoplay or scripted playback.
Verification of autoplay success or failure is an
established paradigm
for HTMLMediaElements, and the onAutoplayBlocked
event now provides similar
functionality for the IFrame Player API.
April 27, 2021
The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars
object to customize the player.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the IFrame Player API's queueing functions for lists ,
cuePlaylist
and
loadPlaylist
.
This change will become effective on or after cuePlaylist
or loadPlaylist
functions that set the listType
property to search
will generate a 4xx
response code, such as
404
( Not Found
) or 410
( Gone
). This change
also affects the list
property for those functions as that property no longer
supports the ability to specify a search query.
As an alternative, you can use the YouTube Data API's
search.list
method to retrieve search
results and then load selected videos in the player.
October 24, 2019
The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article , to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.
The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:
- The
getPlaybackQuality
,setPlaybackQuality
, andgetAvailableQualityLevels
functions are no longer supported. In particular, calls tosetPlaybackQuality
will be no-op functions, meaning they will not actually have any impact on the viewer's playback experience. - The queueing functions for videos and playlists --
cueVideoById
,loadVideoById
, etc. -- no longer support thesuggestedQuality
argument. Similarly, if you call those functions using object syntax, thesuggestedQuality
field is no longer supported. IfsuggestedQuality
is specified, it will be ignored when the request is handled. It will not generate any warnings or errors. - The
onPlaybackQualityChange
event is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.
May 16, 2018
The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos :
- The
getSphericalProperties
function retrieves the current orientation for the video playback. The orientation includes the following data:- yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
- pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
- roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
- fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
- The
setSphericalProperties
function modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond toDeviceOrientationEvents
on supported mobile devices.
This example demonstrates and lets you test these new features.
June 19, 2017
This update contains the following changes:
-
Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.
August 11, 2016
This update contains the following changes:
-
The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog , provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms , which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms . In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.
June 29, 2016
This update contains the following changes:
-
The documentation has been corrected to note that the
onApiChange
method provides access to thecaptions
module and not thecc
module.
June 24, 2016
The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe>
element.
January 6, 2016
The clearVideo
function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy . We have added a notice of this requirement in our YouTube API Terms of Service .
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSeconds
property, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. -
The
getVideoStartBytes
method has been deprecated. The method now always returns a value of0
.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>
tag has been updated to include a closing</iframe>
tag since theonYouTubeIframeAPIReady
function is only called if the closing</iframe>
element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates
– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate
– Retrieve the playback rate for the cued or playing video.setPlaybackRate
– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange
– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFraction
method replaces the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods. The new method returns the percentage of the video that the player shows as buffered. -
The
onError
event may now return an error code of5
, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReady
function. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady
. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady
function and anonYouTubePlayerAPIReady
function, both functions will be called, and theonYouTubeIframeAPIReady
function will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api
. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api
) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()
anddestroy()
methods. ThesetSize()
method sets the size in pixels of the<iframe>
that contains the player and thedestroy()
method removes the<iframe>
.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimental
status from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>
element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>
element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe()
, which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.
Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change.
This guide explains how to use the IFrame API. It identifies the different types of events that the API can send and explains how to write event listeners to respond to those events. It also details the different JavaScript functions that you can call to control the video player as well as the player parameters you can use to further customize the player.
প্রয়োজনীয়তা
The user's browser must support the HTML5 postMessage
feature. Most modern browsers support postMessage
.
Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
Any web page that uses the IFrame API must also implement the following JavaScript function:
onYouTubeIframeAPIReady
– The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.
শুরু হচ্ছে
The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. The numbered comments in the HTML are explained in the list below the example.
<!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
The following list provides more details about the sample above:
The
<div>
tag in this section identifies the location on the page where the IFrame API will place the video player. The constructor for the player object, which is described in the Loading a video player section, identifies the<div>
tag by itsid
to ensure that the API places the<iframe>
in the proper location. Specifically, the IFrame API will replace the<div>
tag with the<iframe>
tag.As an alternative, you could also put the
<iframe>
element directly on the page. The Loading a video player section explains how to do so.The code in this section loads the IFrame Player API JavaScript code. The example uses DOM modification to download the API code to ensure that the code is retrieved asynchronously. (The
<script>
tag'sasync
attribute, which also enables asynchronous downloads, is not yet supported in all modern browsers as discussed in this Stack Overflow answer .The
onYouTubeIframeAPIReady
function will execute as soon as the player API code downloads. This portion of the code defines a global variable,player
, which refers to the video player you are embedding, and the function then constructs the video player object.The
onPlayerReady
function will execute when theonReady
event fires. In this example, the function indicates that when the video player is ready, it should begin to play.The API will call the
onPlayerStateChange
function when the player's state changes, which may indicate that the player is playing, paused, finished, and so forth. The function indicates that when the player state is1
(playing), the player should play for six seconds and then call thestopVideo
function to stop the video.
Loading a video player
After the API's JavaScript code loads, the API will call the onYouTubeIframeAPIReady
function, at which point you can construct a YT.Player
object to insert a video player on your page. The HTML excerpt below shows the onYouTubeIframeAPIReady
function from the example above:
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: { 'playsinline': 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
The constructor for the video player specifies the following parameters:
The first parameter specifies either the DOM element or the
id
of the HTML element where the API will insert the<iframe>
tag containing the player.The IFrame API will replace the specified element with the
<iframe>
element containing the player. This could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.- The second parameter is an object that specifies player options. The object contains the following properties:
-
width
(number) – The width of the video player. The default value is640
. -
height
(number) – The height of the video player. The default value is390
. -
videoId
(string) – The YouTube video ID that identifies the video that the player will load. -
playerVars
(object) – The object's properties identify player parameters that can be used to customize the player. -
events
(object) – The object's properties identify the events that the API fires and the functions (event listeners) that the API will call when those events occur. In the example, the constructor indicates that theonPlayerReady
function will execute when theonReady
event fires and that theonPlayerStateChange
function will execute when theonStateChange
event fires.
-
As mentioned in the Getting started section, instead of writing an empty <div>
element on your page, which the player API's JavaScript code will then replace with an <iframe>
element, you could create the <iframe>
tag yourself. The first example in the Examples section shows how to do this.
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>
Note that if you do write the <iframe>
tag, then when you construct the YT.Player
object, you do not need to specify values for the width
and height
, which are specified as attributes of the <iframe>
tag, or the videoId
and player parameters, which are are specified in the src
URL. As an extra security measure, you should also include the origin
parameter to the URL, specifying the URL scheme ( http://
or https://
) and full domain of your host page as the parameter value. While origin
is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.
For other examples on constructing video player objects, see Examples .
অপারেশন
To call the player API methods, you must first get a reference to the player object you wish to control. You obtain the reference by creating a YT.Player
object as discussed in the Getting started and Loading a video player sections of this document.
ফাংশন
Queueing functions
Queueing functions allow you to load and play a video, a playlist, or another list of videos. If you are using the object syntax described below to call these functions, then you can also queue or load a list of a user's uploaded videos.
The API supports two different syntaxes for calling the queueing functions.
The argument syntax requires function arguments to be listed in a prescribed order.
The object syntax lets you pass an object as a single parameter and to define object properties for the function arguments that you wish to set. In addition, the API may support additional functionality that the argument syntax does not support.
For example, the loadVideoById
function can be called in either of the following ways. Note that the object syntax supports the endSeconds
property, which the argument syntax does not support.
Argument syntax
loadVideoById("bHQqvYy5KYo", 5, "large")
Object syntax
loadVideoById({'videoId': 'bHQqvYy5KYo', 'startSeconds': 5, 'endSeconds': 60});
Queueing functions for videos
-
cueVideoById
Argument syntax
player.cueVideoById(videoId:String, startSeconds:Number):Void
Object syntax
player.cueVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
This function loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until
playVideo()
orseekTo()
is called.- The required
videoId
parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, avideo
resource'sid
property specifies the ID. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing whenplayVideo()
is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. When the video is cued and ready to play, the player will broadcast avideo cued
event (5
). - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. If you specify anendSeconds
value and then callseekTo()
, theendSeconds
value will no longer be in effect.
loadVideoById
Argument syntax
player.loadVideoById(videoId:String, startSeconds:Number):Void
Object syntax
player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number}):Void
This function loads and plays the specified video.
- The required
videoId
parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, avideo
resource'sid
property specifies the ID. - The optional
startSeconds
parameter accepts a float/integer. If it is specified, then the video will start from the closest keyframe to the specified time. - The optional
endSeconds
parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.
cueVideoByUrl
Argument syntax
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Object syntax
player.cueVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
This function loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until
playVideo()
orseekTo()
is called.- The required
mediaContentUrl
parameter specifies a fully qualified YouTube player URL in the formathttp://www.youtube.com/v/VIDEO_ID?version=3
. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing whenplayVideo()
is called. If you specifystartSeconds
and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. When the video is cued and ready to play, the player will broadcast avideo cued
event (5). - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. If you specify anendSeconds
value and then callseekTo()
, theendSeconds
value will no longer be in effect.
loadVideoByUrl
Argument syntax
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number):Void
Object syntax
player.loadVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number}):Void
This function loads and plays the specified video.
- The required
mediaContentUrl
parameter specifies a fully qualified YouTube player URL in the formathttp://www.youtube.com/v/VIDEO_ID?version=3
. - The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the video should start playing. IfstartSeconds
(number can be a float) is specified, the video will start from the closest keyframe to the specified time. - The optional
endSeconds
parameter, which is only supported in object syntax, accepts a float/integer and specifies the time when the video should stop playing.
Queueing functions for lists
The cuePlaylist
and loadPlaylist
functions allow you to load and play a playlist. If you are using object syntax to call these functions, you can also queue (or load) a list of a user's uploaded videos.
Since the functions work differently depending on whether they are called using the argument syntax or the object syntax, both calling methods are documented below.
-
cuePlaylist
Argument syntax
Queues the specified playlist. When the playlist is cued and ready to play, the player will broadcast aplayer.cuePlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
video cued
event (5
).The required
playlist
parameter specifies an array of YouTube video IDs. In the YouTube Data API, thevideo
resource'sid
property identifies that video's ID.The optional
index
parameter specifies the index of the first video in the playlist that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the playlist.The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the first video in the playlist should start playing when theplayVideo()
function is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. If you cue a playlist and then call theplayVideoAt()
function, the player will start playing at the beginning of the specified video.
Object syntax
Queues the specified list of videos. The list can be a playlist or a user's uploaded videos feed. The ability to queue a list of search results is deprecated and will no longer be supported as ofplayer.cuePlaylist({listType:String, list:String, index:Number, startSeconds:Number}):Void
15 November 2020 .When the list is cued and ready to play, the player will broadcast a
video cued
event (5
).The optional
listType
property specifies the type of results feed that you are retrieving. Valid values areplaylist
anduser_uploads
. A deprecated value,search
, will no longer be supported as of15 November 2020 . The default value isplaylist
.The required
list
property contains a key that identifies the particular list of videos that YouTube should return.- If the
listType
property value isplaylist
, then thelist
property specifies the playlist ID or an array of video IDs. In the YouTube Data API, theplaylist
resource'sid
property identifies a playlist's ID, and thevideo
resource'sid
property specifies a video ID. - If the
listType
property value isuser_uploads
, then thelist
property identifies the user whose uploaded videos will be returned. - If the
listType
property value issearch
, then thelist
property specifies the search query. Note: This functionality is deprecated and will no longer be supported as of15 November 2020 .
- If the
The optional
index
property specifies the index of the first video in the list that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the list.The optional
startSeconds
property accepts a float/integer and specifies the time from which the first video in the list should start playing when theplayVideo()
function is called. If you specify astartSeconds
value and then callseekTo()
, then the player plays from the time specified in theseekTo()
call. If you cue a list and then call theplayVideoAt()
function, the player will start playing at the beginning of the specified video.
-
loadPlaylist
Argument syntax
This function loads the specified playlist and plays it.player.loadPlaylist(playlist:String|Array, index:Number, startSeconds:Number):Void
The required
playlist
parameter specifies an array of YouTube video IDs. In the YouTube Data API, thevideo
resource'sid
property specifies a video ID.The optional
index
parameter specifies the index of the first video in the playlist that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the playlist.The optional
startSeconds
parameter accepts a float/integer and specifies the time from which the first video in the playlist should start playing.
Object syntax
This function loads the specified list and plays it. The list can be a playlist or a user's uploaded videos feed. The ability to load a list of search results is deprecated and will no longer be supported as ofplayer.loadPlaylist({list:String, listType:String, index:Number, startSeconds:Number}):Void
15 November 2020 .The optional
listType
property specifies the type of results feed that you are retrieving. Valid values areplaylist
anduser_uploads
. A deprecated value,search
, will no longer be supported as of15 November 2020 . The default value isplaylist
.The required
list
property contains a key that identifies the particular list of videos that YouTube should return.- If the
listType
property value isplaylist
, then thelist
property specifies a playlist ID or an array of video IDs. In the YouTube Data API, theplaylist
resource'sid
property specifies a playlist's ID, and thevideo
resource'sid
property specifies a video ID. - If the
listType
property value isuser_uploads
, then thelist
property identifies the user whose uploaded videos will be returned. - If the
listType
property value issearch
, then thelist
property specifies the search query. Note: This functionality is deprecated and will no longer be supported as of15 November 2020 .
- If the
The optional
index
property specifies the index of the first video in the list that will play. The parameter uses a zero-based index, and the default parameter value is0
, so the default behavior is to load and play the first video in the list.The optional
startSeconds
property accepts a float/integer and specifies the time from which the first video in the list should start playing.
Playback controls and player settings
একটি ভিডিও চালানো হচ্ছে
-
player. playVideo ():Void
- Plays the currently cued/loaded video. The final player state after this function executes will be
playing
(1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
-
player. pauseVideo ():Void
- Pauses the currently playing video. The final player state after this function executes will be
paused
(2
) unless the player is in theended
(0
) state when the function is called, in which case the player state will not change.
-
player. stopVideo ():Void
- Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the
pauseVideo
function. If you want to change the video that the player is playing, you can call one of the queueing functions without callingstopVideo
first.
Important: Unlike thepauseVideo
function, which leaves the player in thepaused
(2
) state, thestopVideo
function could put the player into any not-playing state, includingended
(0
),paused
(2
),video cued
(5
) orunstarted
(-1
).
-
player. seekTo (seconds:Number, allowSeekAhead:Boolean):Void
- Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (
playing
,video cued
, etc.), the player will play the video.The
seconds
parameter identifies the time to which the player should advance.The player will advance to the closest keyframe before that time unless the player has already downloaded the portion of the video to which the user is seeking.
The
allowSeekAhead
parameter determines whether the player will make a new request to the server if theseconds
parameter specifies a time outside of the currently buffered video data.We recommend that you set this parameter to
false
while the user drags the mouse along a video progress bar and then set it totrue
when the user releases the mouse. This approach lets a user scroll to different points of a video without requesting new video streams by scrolling past unbuffered points in the video. When the user releases the mouse button, the player advances to the desired point in the video and requests a new video stream if necessary.
Controlling playback of 360° videos
Note: The 360° video playback experience has limited support on mobile devices. On unsupported devices, 360° videos appear distorted and there is no supported way to change the viewing perspective at all, including through the API, using orientation sensors, or responding to touch/drag actions on the device's screen.
-
player. getSphericalProperties ():Object
- Retrieves properties that describe the viewer's current perspective, or view, for a video playback. উপরন্তু:
- This object is only populated for 360° videos, which are also called spherical videos.
- If the current video is not a 360° video or if the function is called from a non-supported device, then the function returns an empty object.
- On supported mobile devices, if the
enableOrientationSensor
property is set totrue
, then this function returns an object in which thefov
property contains the correct value and the other properties are set to0
.
বৈশিষ্ট্য yaw
A number in the range [0, 360) that represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right. The neutral position, facing the center of the video in its equirectangular projection, represents 0°, and this value increases as the viewer turns left. pitch
A number in the range [-90, 90] that represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down. The neutral position, facing the center of the video in its equirectangular projection, represents 0°, and this value increases as the viewer looks up. roll
A number in the range [-180, 180] that represents the clockwise or counterclockwise rotational angle of the view in degrees. The neutral position, with the horizontal axis in the equirectangular projection being parallel to the horizontal axis of the view, represents 0°. The value increases as the view rotates clockwise and decreases as the view rotates counterclockwise.
Note that the embedded player does not present a user interface for adjusting the roll of the view. The roll can be adjusted in either of these mutually exclusive ways:- Use the orientation sensor in a mobile browser to provide roll for the view. If the orientation sensor is enabled, then the
getSphericalProperties
function always returns0
as the value of theroll
property. - If the orientation sensor is disabled, set the roll to a nonzero value using this API.
fov
A number in the range [30, 120] that represents the field-of-view of the view in degrees as measured along the longer edge of the viewport. The shorter edge is automatically adjusted to be proportional to the aspect ratio of the view.
The default value is 100 degrees. Decreasing the value is like zooming in on the video content, and increasing the value is like zooming out. This value can be adjusted either by using the API or by using the mousewheel when the video is in fullscreen mode.
-
player. setSphericalProperties (properties:Object):Void
- Sets the video orientation for playback of a 360° video. (If the current video is not spherical, the method is a no-op regardless of the input.)
The player view responds to calls to this method by updating to reflect the values of any known properties in theproperties
object. The view persists values for any other known properties not included in that object.
উপরন্তু:- If the object contains unknown and/or unexpected properties, the player ignores them.
- As noted at the beginning of this section, the 360° video playback experience is not supported on all mobile devices.
- By default, on supported mobile devices, this function sets only sets the
fov
property and does not affect theyaw
,pitch
, androll
properties for 360° video playbacks. See theenableOrientationSensor
property below for more detail.
properties
object passed to the function contains the following properties:বৈশিষ্ট্য yaw
See definition above. pitch
See definition above. roll
See definition above. fov
See definition above. enableOrientationSensor
Note: This property affects the 360° viewing experience on supported devices only. A boolean value that indicates whether the IFrame embed should respond to events that signal changes in a supported device's orientation, such as a mobile browser's DeviceOrientationEvent
. The default parameter value istrue
.
Supported mobile devices- When the value is
true
, an embedded player relies only on the device's movement to adjust theyaw
,pitch
, androll
properties for 360° video playbacks. However, thefov
property can still be changed via the API, and the API is, in fact, the only way to change thefov
property on a mobile device. এটি ডিফল্ট আচরণ। - When the value is
false
, then the device's movement does not affect the 360° viewing experience, and theyaw
,pitch
,roll
, andfov
properties must all be set via the API.
Unsupported mobile devices
TheenableOrientationSensor
property value does not have any effect on the playback experience.
Playing a video in a playlist
-
player. nextVideo ():Void
- This function loads and plays the next video in the playlist.
If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the first video in the list.If
player.nextVideo()
is called while the last video in the playlist is being watched, and the playlist is not set to play continuously, then playback will end.
-
player. previousVideo ():Void
- This function loads and plays the previous video in the playlist.
If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is set to play continuously (loop
), then the player will load and play the last video in the list.If
player.previousVideo()
is called while the first video in the playlist is being watched, and the playlist is not set to play continuously, then the player will restart the first playlist video from the beginning.
-
player. playVideoAt (index:Number):Void
- This function loads and plays the specified video in the playlist.
The required
index
parameter specifies the index of the video that you want to play in the playlist. The parameter uses a zero-based index, so a value of0
identifies the first video in the list. If you have shuffled the playlist, this function will play the video at the specified position in the shuffled playlist.
Changing the player volume
-
player. mute ():Void
- Mutes the player.
-
player. unMute ():Void
- Unmutes the player.
-
player. isMuted ():Boolean
- Returns
true
if the player is muted,false
if not.
-
player. setVolume (volume:Number):Void
- Sets the volume. Accepts an integer between
0
and100
.
-
player. getVolume ():Number
- Returns the player's current volume, an integer between
0
and100
. Note thatgetVolume()
will return the volume even if the player is muted.
Setting the player size
-
player.setSize(width:Number, height:Number):Object
- Sets the size in pixels of the
<iframe>
that contains the player.
Setting the playback rate
-
player. getPlaybackRate ():Number
- This function retrieves the playback rate of the currently playing video. The default playback rate is
1
, which indicates that the video is playing at normal speed. Playback rates may include values like0.25
,0.5
,1
,1.5
, and2
.
-
player. setPlaybackRate (suggestedRate:Number):Void
- This function sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played. If you set the playback rate for a cued video, that rate will still be in effect when the
playVideo
function is called or the user initiates playback directly through the player controls. In addition, calling functions to cue or load videos or playlists (cueVideoById
,loadVideoById
, etc.) will reset the playback rate to1
.
Calling this function does not guarantee that the playback rate will actually change. However, if the playback rate does change, theonPlaybackRateChange
event will fire, and your code should respond to the event rather than the fact that it called thesetPlaybackRate
function.
ThegetAvailablePlaybackRates
method will return the possible playback rates for the currently playing video. However, if you set thesuggestedRate
parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of1
.
-
player. getAvailablePlaybackRates ():Array
- This function returns the set of playback rates in which the current video is available. The default value is
1
, which indicates that the video is playing in normal speed.
The function returns an array of numbers ordered from slowest to fastest playback speed. Even if the player does not support variable playback speeds, the array should always contain at least one value (1
).
Setting playback behavior for playlists
-
player. setLoop (loopPlaylists:Boolean):Void
This function indicates whether the video player should continuously play a playlist or if it should stop playing after the last video in the playlist ends. The default behavior is that playlists do not loop.
This setting will persist even if you load or cue a different playlist, which means that if you load a playlist, call the
setLoop
function with a value oftrue
, and then load a second playlist, the second playlist will also loop.The required
loopPlaylists
parameter identifies the looping behavior.If the parameter value is
true
, then the video player will continuously play playlists. After playing the last video in a playlist, the video player will go back to the beginning of the playlist and play it again.If the parameter value is
false
, then playbacks will end after the video player plays the last video in a playlist.
-
player. setShuffle (shufflePlaylist:Boolean):Void
This function indicates whether a playlist's videos should be shuffled so that they play back in an order different from the one that the playlist creator designated. If you shuffle a playlist after it has already started playing, the list will be reordered while the video that is playing continues to play. The next video that plays will then be selected based on the reordered list.
This setting will not persist if you load or cue a different playlist, which means that if you load a playlist, call the
setShuffle
function, and then load a second playlist, the second playlist will not be shuffled.The required
shufflePlaylist
parameter indicates whether YouTube should shuffle the playlist.If the parameter value is
true
, then YouTube will shuffle the playlist order. If you instruct the function to shuffle a playlist that has already been shuffled, YouTube will shuffle the order again.If the parameter value is
false
, then YouTube will change the playlist order back to its original order.
Playback status
-
player. getVideoLoadedFraction ():Float
- Returns a number between
0
and1
that specifies the percentage of the video that the player shows as buffered. This method returns a more reliable number than the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods.
-
player.getPlayerState():Number
- Returns the state of the player. সম্ভাব্য মান হল:
-
-1
– unstarted -
0
– ended -
1
– playing -
2
– paused -
3
– buffering -
5
– video cued
-
-
player. getCurrentTime ():Number
- Returns the elapsed time in seconds since the video started playing.
-
player. getVideoStartBytes ():Number
- Deprecated as of October 31, 2012. Returns the number of bytes the video file started loading from. (This method now always returns a value of
0
.) Example scenario: the user seeks ahead to a point that hasn't loaded yet, and the player makes a new request to play a segment of the video that hasn't loaded yet.
-
player. getVideoBytesLoaded ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
This method returns a value between0
and1000
that approximates the amount of the video that has been loaded. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
-
player. getVideoBytesTotal ():Number
- Deprecated as of July 18, 2012. Instead, use the
getVideoLoadedFraction
method to determine the percentage of the video that has buffered.
Returns the size in bytes of the currently loaded/playing video or an approximation of the video's size.
This method always returns a value of1000
. You could calculate the fraction of the video that has been loaded by dividing thegetVideoBytesLoaded
value by thegetVideoBytesTotal
value.
Retrieving video information
-
player. getDuration ():Number
- Returns the duration in seconds of the currently playing video. Note that
getDuration()
will return0
until the video's metadata is loaded, which normally happens just after the video starts playing.
If the currently playing video is a live event , thegetDuration()
function will return the elapsed time since the live video stream began. Specifically, this is the amount of time that the video has streamed without being reset or interrupted. In addition, this duration is commonly longer than the actual event time since streaming may begin before the event's start time.
-
player. getVideoUrl ():String
- Returns the YouTube.com URL for the currently loaded/playing video.
-
player. getVideoEmbedCode ():String
- Returns the embed code for the currently loaded/playing video.
Retrieving playlist information
-
player. getPlaylist ():Array
- This function returns an array of the video IDs in the playlist as they are currently ordered. By default, this function will return video IDs in the order designated by the playlist owner. However, if you have called the
setShuffle
function to shuffle the playlist order, then thegetPlaylist()
function's return value will reflect the shuffled order.
-
player. getPlaylistIndex ():Number
- This function returns the index of the playlist video that is currently playing.
If you have not shuffled the playlist, the return value will identify the position where the playlist creator placed the video. The return value uses a zero-based index, so a value of
0
identifies the first video in the playlist.If you have shuffled the playlist, the return value will identify the video's order within the shuffled playlist.
Adding or removing an event listener
-
player. addEventListener (event:String, listener:String):Void
- Adds a listener function for the specified
event
. The Events section below identifies the different events that the player might fire. The listener is a string that specifies the function that will execute when the specified event fires.
-
player. removeEventListener (event:String, listener:String):Void
- Removes a listener function for the specified
event
. Thelistener
is a string that identifies the function that will no longer execute when the specified event fires.
Accessing and modifying DOM nodes
-
player. getIframe ():Object
- This method returns the DOM node for the embedded
<iframe>
.
-
player. destroy ():Void
- Removes the
<iframe>
containing the player.
ঘটনা
The API fires events to notify your application of changes to the embedded player. As noted in the previous section, you can subscribe to events by adding an event listener when constructing the YT.Player
object , and you can also use the addEventListener
function.
The API will pass an event object as the sole argument to each of those functions. The event object has the following properties:
- The event's
target
identifies the video player that corresponds to the event. - The event's
data
specifies a value relevant to the event. Note that theonReady
andonAutoplayBlocked
events do not specify adata
property.
The following list defines the events that the API fires:
-
onReady
- This event fires whenever a player has finished loading and is ready to begin receiving API calls. Your application should implement this function if you want to automatically execute certain operations, such as playing the video or displaying information about the video, as soon as the player is ready.
The example below shows a sample function for handling this event. The event object that the API passes to the function has atarget
property, which identifies the player. The function retrieves the embed code for the currently loaded video, starts to play the video, and displays the embed code in the page element that has anid
value ofembed-code
.function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
-
onStateChange
- This event fires whenever the player's state changes. The
data
property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. সম্ভাব্য মান হল:-
-1
(unstarted) -
0
(ended) -
1
(playing) -
2
(paused) -
3
(buffering) -
5
(video cued).
unstarted
(-1
) event. When a video is cued and ready to play, the player will broadcast avideo cued
(5
) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:-
YT.PlayerState.ENDED
-
YT.PlayerState.PLAYING
-
YT.PlayerState.PAUSED
-
YT.PlayerState.BUFFERING
-
YT.PlayerState.CUED
-
-
onPlaybackQualityChange
- This event fires whenever the video playback quality changes. It might signal a change in the viewer's playback environment. See the YouTube Help Center for more information about factors that affect playback conditions or that might cause the event to fire.
Thedata
property value of the event object that the API passes to the event listener function will be a string that identifies the new playback quality. সম্ভাব্য মান হল:-
small
-
medium
-
large
-
hd720
-
hd1080
-
highres
-
-
onPlaybackRateChange
- This event fires whenever the video playback rate changes. For example, if you call the
setPlaybackRate(suggestedRate)
function, this event will fire if the playback rate actually changes. Your application should respond to the event and should not assume that the playback rate will automatically change when thesetPlaybackRate(suggestedRate)
function is called. Similarly, your code should not assume that the video playback rate will only change as a result of an explicit call tosetPlaybackRate
.
Thedata
property value of the event object that the API passes to the event listener function will be a number that identifies the new playback rate. ThegetAvailablePlaybackRates
method returns a list of the valid playback rates for the currently cued or playing video.
-
onError
- This event fires if an error occurs in the player. The API will pass an
event
object to the event listener function. That object'sdata
property will specify an integer that identifies the type of error that occurred. সম্ভাব্য মান হল:-
2
– The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks. -
5
– The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
100
– The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private. -
101
– The owner of the requested video does not allow it to be played in embedded players. -
150
– This error is the same as101
. It's just a101
error in disguise!
-
-
onApiChange
- This event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods. Your application can listen for this event and then poll the player to determine which options are exposed for the recently loaded module. Your application can then retrieve or update the existing settings for those options.
The following command retrieves an array of module names for which you can set player options: Currently, the only module that you can set options for is theplayer.getOptions();
captions
module, which handles closed captioning in the player. Upon receiving anonApiChange
event, your application can use the following command to determine which options can be set for thecaptions
module: By polling the player with this command, you can confirm that the options you want to access are, indeed, accessible. The following commands retrieve and update module options:player.getOptions('captions');
The table below lists the options that the API supports:Retrieving an option: player.getOption(module, option); Setting an option player.setOption(module, option, value);
মডিউল অপশন বর্ণনা captions fontSize This option adjusts the font size of the captions displayed in the player.
Valid values are-1
,0
,1
,2
, and3
. The default size is0
, and the smallest size is-1
. Setting this option to an integer below-1
will cause the smallest caption size to display, while setting this option to an integer above3
will cause the largest caption size to display.captions reload This option reloads the closed caption data for the video that is playing. The value will be null
if you retrieve the option's value. Set the value totrue
to reload the closed caption data.
-
onAutoplayBlocked
- This event fires any time the browser blocks autoplay or scripted video playback features, collectively referred to as "autoplay". This includes playback attempted with any of the following player APIs:
-
autoplay
parameter -
loadPlaylist
function -
loadVideoById
function -
loadVideoByUrl
function -
playVideo
function
For complete details, refer to browser-specific policies ( Apple Safari / Webkit , Google Chrome , Mozilla Firefox ) and Mozilla's autoplay guide . -
উদাহরণ
Creating YT.Player
objects
Example 1: Use API with existing <iframe>
In this example, an
<iframe>
element on the page already defines the player with which the API will be used. Note that either the player'ssrc
URL must set theenablejsapi
parameter to1
or the<iframe>
element'senablejsapi
attribute must be set totrue
.The
onPlayerReady
function changes the color of the border around the player to orange when the player is ready. TheonPlayerStateChange
function then changes the color of the border around the player based on the current player status. For example, the color is green when the player is playing, red when paused, blue when buffering, and so forth.This example uses the following code:
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('existing-iframe-example', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; } function changeBorderColor(playerStatus) { var color; if (playerStatus == -1) { color = "#37474F"; // unstarted = gray } else if (playerStatus == 0) { color = "#FFFF00"; // ended = yellow } else if (playerStatus == 1) { color = "#33691E"; // playing = green } else if (playerStatus == 2) { color = "#DD2C00"; // paused = red } else if (playerStatus == 3) { color = "#AA00FF"; // buffering = purple } else if (playerStatus == 5) { color = "#FF6DOO"; // video cued = orange } if (color) { document.getElementById('existing-iframe-example').style.borderColor = color; } } function onPlayerStateChange(event) { changeBorderColor(event.data); } </script>
Example 2: Loud playback
This example creates a 1280px by 720px video player. The event listener for the
onReady
event then calls thesetVolume
function to adjust the volume to the highest setting.function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); }
Example 3: This example sets player parameters to automatically play the video when it loads and to hide the video player's controls. It also adds event listeners for several events that the API broadcasts.
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
Controlling 360° videos
This example uses the following code:
<style> .current-values { color: #666; font-size: 12px; } </style> <!-- The player is inserted in the following div element --> <div id="spherical-video-player"></div> <!-- Display spherical property values and enable user to update them. --> <table style="border: 0; width: 640px;"> <tr style="background: #fff;"> <td> <label for="yaw-property">yaw: </label> <input type="text" id="yaw-property" style="width: 80px"><br> <div id="yaw-current-value" class="current-values"> </div> </td> <td> <label for="pitch-property">pitch: </label> <input type="text" id="pitch-property" style="width: 80px"><br> <div id="pitch-current-value" class="current-values"> </div> </td> <td> <label for="roll-property">roll: </label> <input type="text" id="roll-property" style="width: 80px"><br> <div id="roll-current-value" class="current-values"> </div> </td> <td> <label for="fov-property">fov: </label> <input type="text" id="fov-property" style="width: 80px"><br> <div id="fov-current-value" class="current-values"> </div> </td> <td style="vertical-align: bottom;"> <button id="spherical-properties-button">Update properties</button> </td> </tr> </table> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov']; var updateButton = document.getElementById('spherical-properties-button'); // Create the YouTube Player. var ytplayer; function onYouTubeIframeAPIReady() { ytplayer = new YT.Player('spherical-video-player', { height: '360', width: '640', videoId: 'FAtdv94yzp4', }); } // Don't display current spherical settings because there aren't any. function hideCurrentSettings() { for (var p = 0; p < PROPERTIES.length; p++) { document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = ''; } } // Retrieve current spherical property values from the API and display them. function updateSetting() { if (!ytplayer || !ytplayer.getSphericalProperties) { hideCurrentSettings(); } else { let newSettings = ytplayer.getSphericalProperties(); if (Object.keys(newSettings).length === 0) { hideCurrentSettings(); } else { for (var p = 0; p < PROPERTIES.length; p++) { if (newSettings.hasOwnProperty(PROPERTIES[p])) { currentValueNode = document.getElementById(PROPERTIES[p] + '-current-value'); currentValueNode.innerHTML = ('current: ' + newSettings[PROPERTIES[p]].toFixed(4)); } } } } requestAnimationFrame(updateSetting); } updateSetting(); // Call the API to update spherical property values. updateButton.onclick = function() { var sphericalProperties = {}; for (var p = 0; p < PROPERTIES.length; p++) { var propertyInput = document.getElementById(PROPERTIES[p] + '-property'); sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value); } ytplayer.setSphericalProperties(sphericalProperties); } </script>
Android WebView Media Integrity API integration
YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube. The data collected through usage of this API is the app metadata (the package name, version number, and signing certificate) and a device attestation token generated by Google Play services.
The data is used to verify the application and device integrity. It is encrypted, not shared with third parties, and deleted following a fixed retention period. App developers can configure their app identity in the WebView Media Integrity API. The configuration supports an opt-out option.
পুনর্বিবেচনার ইতিহাস
June 24, 2024
The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.
November 20, 2023
The new onAutoplayBlocked
event API is now available.
This event notifies your application if the browser blocks autoplay or scripted playback.
Verification of autoplay success or failure is an
established paradigm
for HTMLMediaElements, and the onAutoplayBlocked
event now provides similar
functionality for the IFrame Player API.
April 27, 2021
The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars
object to customize the player.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the IFrame Player API's queueing functions for lists ,
cuePlaylist
and
loadPlaylist
.
This change will become effective on or after cuePlaylist
or loadPlaylist
functions that set the listType
property to search
will generate a 4xx
response code, such as
404
( Not Found
) or 410
( Gone
). This change
also affects the list
property for those functions as that property no longer
supports the ability to specify a search query.
As an alternative, you can use the YouTube Data API's
search.list
method to retrieve search
results and then load selected videos in the player.
October 24, 2019
The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article , to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.
The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:
- The
getPlaybackQuality
,setPlaybackQuality
, andgetAvailableQualityLevels
functions are no longer supported. In particular, calls tosetPlaybackQuality
will be no-op functions, meaning they will not actually have any impact on the viewer's playback experience. - The queueing functions for videos and playlists --
cueVideoById
,loadVideoById
, etc. -- no longer support thesuggestedQuality
argument. Similarly, if you call those functions using object syntax, thesuggestedQuality
field is no longer supported. IfsuggestedQuality
is specified, it will be ignored when the request is handled. It will not generate any warnings or errors. - The
onPlaybackQualityChange
event is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.
May 16, 2018
The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos :
- The
getSphericalProperties
function retrieves the current orientation for the video playback. The orientation includes the following data:- yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
- pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
- roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
- fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
- The
setSphericalProperties
function modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond toDeviceOrientationEvents
on supported mobile devices.
This example demonstrates and lets you test these new features.
June 19, 2017
This update contains the following changes:
-
Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.
August 11, 2016
This update contains the following changes:
-
The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog , provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms , which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms . In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.
June 29, 2016
This update contains the following changes:
-
The documentation has been corrected to note that the
onApiChange
method provides access to thecaptions
module and not thecc
module.
June 24, 2016
The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe>
element.
January 6, 2016
The clearVideo
function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy . We have added a notice of this requirement in our YouTube API Terms of Service .
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSeconds
property, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()
is called. -
The
getVideoStartBytes
method has been deprecated. The method now always returns a value of0
.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>
tag has been updated to include a closing</iframe>
tag since theonYouTubeIframeAPIReady
function is only called if the closing</iframe>
element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates
– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate
– Retrieve the playback rate for the cued or playing video.setPlaybackRate
– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange
– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFraction
method replaces the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
methods. The new method returns the percentage of the video that the player shows as buffered. -
The
onError
event may now return an error code of5
, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReady
function. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady
. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady
function and anonYouTubePlayerAPIReady
function, both functions will be called, and theonYouTubeIframeAPIReady
function will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api
. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api
) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()
anddestroy()
methods. ThesetSize()
method sets the size in pixels of the<iframe>
that contains the player and thedestroy()
method removes the<iframe>
.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimental
status from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>
element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>
element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>
element. By default, an<iframe>
displays as aninline-block
element.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe()
, which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.