iframe উপাদান (অভ্যন্তরীণ ফ্রেমের জন্য সংক্ষিপ্ত) একটি HTML পৃষ্ঠায় অন্যান্য উত্স থেকে সামগ্রী এম্বেড করার জন্য ডিজাইন করা হয়েছে৷ উদাহরণস্বরূপ, একটি আইফ্রেম ব্যবহার করার জন্য ধন্যবাদ, আপনি নিজের ভিডিও প্লেয়ার তৈরি এবং বড় ভিডিও ফাইল সংরক্ষণ করার বিষয়ে ভাবতে পারবেন না। পরিবর্তে, আপনি YouTube ব্যবহার করতে পারেন এবং একটি iframe ব্যবহার করে আপনার ওয়েব অ্যাপে প্রয়োজনীয় ভিডিও যোগ করতে পারেন।
YouTube ভিডিওর জন্য iframe ব্যবহার করা
এর একটি নির্দিষ্ট উদাহরণ তাকান. ব্যবসায়িক প্রক্রিয়ায় ফাইল ব্যবহার করার বিষয়ে AppMaster YouTube চ্যানেল থেকে একটি ভিডিও দেখার জন্য একটি পৃষ্ঠা তৈরি করা যাক। এটি করার জন্য, আপনাকে ক্যানভাসে একটি আইফ্রেম উপাদান স্থাপন করতে হবে, প্রয়োজনীয় সেটিংস নির্দিষ্ট করতে হবে (উদাহরণস্বরূপ, আকার এবং ইন্ডেন্টে), এবং Src ক্ষেত্রে পছন্দসই ভিডিওর একটি লিঙ্ক সেট করতে হবে।
একই সময়ে, ইউটিউব প্রাথমিকভাবে এই ধরনের ভিডিও এমবেডিংয়ের সম্ভাবনাকে অনুমান করে এবং প্রক্রিয়াটির সর্বাধিক সুবিধার জন্য প্রয়োজনীয় সরঞ্জাম সরবরাহ করে। ভিডিওর নীচে " Share " বোতামে ক্লিক করে, আপনি " Embed " বিকল্পটি ব্যবহার করতে পারেন।
YouTube তার পৃষ্ঠায় ভিডিও স্থাপন করার জন্য সমস্ত প্রয়োজনীয় HTML কোড প্রদান করবে, কিন্তু আমাদের ক্ষেত্রে, সমস্ত কোড আগ্রহের নয়, শুধুমাত্র প্রয়োজনীয় ভিডিওর একটি লিঙ্ক৷ আপনাকে এটি কপি করে iframe সেটিংসে রাখতে হবে।
ডিফল্ট প্রস্থ এবং উচ্চতা সেটিংস - 560 এবং 315 - এখানেও দৃশ্যমান।
আপনি অ্যাপ্লিকেশনটি প্রকাশ করতে পারেন এবং নিশ্চিত করতে পারেন যে এখন এটিতে সত্যিই একটি এমবেডেড ভিডিও রয়েছে৷
একইভাবে, আপনি অন্যান্য উত্স থেকে অন্যান্য ধরণের ডেটা এম্বেড করতে পারেন। উদাহরণস্বরূপ, একটি মানচিত্র যোগ করুন।
এই সেটিংসের ফলস্বরূপ, আপনি একটি পুরু ডটেড সীমানা সহ একটি বৃত্ত হিসাবে মানচিত্রটি প্রদর্শন করতে পারেন৷
একটি iframe কাস্টম HTML ব্যবহার করে
আসুন একটি আরো জটিল বিকল্প বিবেচনা করা যাক। আমরা স্বাধীনভাবে iframe-এর জন্য html পৃষ্ঠা তৈরি করব, এবং তৃতীয়-পক্ষের উত্স থেকে ডেটা ব্যবহার করব না। এটি করতে, ক্যানভাসে একটি RichtextEditor উপাদান যোগ করুন। এটি আপনাকে একটি সুবিধাজনক ভিজ্যুয়াল এডিটরের সাহায্যে এবং এইচটিএমএল কোডের সরাসরি সম্পাদনার মাধ্যমে HTML তৈরি করতে দেয়।
এটি তৈরি করা প্রয়োজন যাতে সম্পাদকে তৈরি যেকোন এইচটিএমএল ফাইল হিসাবে সংরক্ষণ করা যায় এবং তারপর একটি আইফ্রেমের মাধ্যমে প্রদর্শিত হয়। আসুন একটি বোতাম যোগ করি এবং সংশ্লিষ্ট ব্যবসায়িক প্রক্রিয়া তৈরি করি যা ক্লিক করা হলে চালু হবে।
ব্যবসায়িক প্রক্রিয়ার অংশ হিসাবে, আপনার উচিত:
- Richtext Get Properties ব্লক ব্যবহার করে সম্পাদক থেকে HTML পান।
- এইচটিএমএলকে বাইটে রূপান্তর করুন ( To Bytes )।
- একটি ফাইল তৈরি করতে Make File ব্লক ব্যবহার করুন। মনে রাখবেন যে একটি ফাইল তৈরি করতে, আপনার শুধুমাত্র এর বিষয়বস্তুর প্রয়োজন ( Bytes , এটি পূর্ববর্তী ধাপে প্রাপ্ত হয়েছিল) এবং নাম (এটি যেকোনো কিছু হতে পারে, তবে এটি অবশ্যই ইনস্টল করা উচিত)।
- তৈরি করা ফাইলটি সার্ভারে পাঠান এবং ডাটাবেসে সংরক্ষণ করুন ( Server request POST /_files/ )।
- তৈরি ফাইলের আইডি পান ( Expand File - ID করুন)
- আইডিকে স্ট্রিং এ রূপান্তর করুন ( To String )
- Concat String ব্যবহার করে একটি ফাইলের একটি লিঙ্ক সংগ্রহ করুন। ফলাফলটি https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ এর মতো একটি লিঙ্ক হওয়া উচিত, যেখানে "vdjyien-app.apms.io" হল আপনার সার্ভারের ঠিকানা এবং "dQhJVTYrToCqr9G4KW ফাইলটি হল আগের ধাপে প্রাপ্ত আইডি। ফলস্বরূপ লিঙ্কটি একটি ব্রাউজারে খোলা উচিত। নিশ্চিত করুন যে ফাইলটি যে এন্ডপয়েন্ট গ্রহন করে ( GET /_files/:id/download/ ) এর অনুমোদনের প্রয়োজন নেই এবং অ্যাক্সেসের জন্য উন্মুক্ত।
- যদি লিঙ্কটি ঠিক থাকে, তবে যা বাকি থাকে তা হল আইফ্রেমে পাস করা এবং ফলাফলটি দেখতে ( iFrame Update Properties )।
এখন Richtext Editor তৈরি যেকোনো এইচটিএমএল ডাটাবেসে সংরক্ষণ করা যায় এবং অ্যাপ্লিকেশনটিতে প্রদর্শিত হয়। এইভাবে, iframe ব্লক ব্যবহার করে, আপনি এমনকি আপনার অ্যাপ্লিকেশনে এমন উপাদান যুক্ত করতে পারেন যা ডিজাইনার দ্বারা প্রাথমিকভাবে প্রদান করা হয় না, অ-মানক ফন্ট ব্যবহার করুন, বা কাস্টম HTML কোড দিয়ে ব্লক তৈরি করতে পারেন।
