এইচটিএমএল 5 ভিডিও পূর্ণস্ক্রিন করার কোনও উপায় আছে?

Question

এইচটিএমএল 5 <video>ট্যাগ ব্যবহার করে কোনও ভিডিও পূর্ণস্ক্রিন খেলার কোনও উপায় আছে কি ?

এবং যদি এটি সম্ভব না হয় তবে এই সিদ্ধান্তের কারণ আছে কিনা তা কি কেউ জানেন?

Comments

@ মিফথফক্স একটি আধুনিক ব্রাউজার এইচটিএমএল 5 সমর্থন বৈশিষ্ট্য চেকলিস্টটি এখানে পাওয়া যাবে: findmebyip.com/litmus/#html5-web-applications

— ghoppe

## বিশ্বের প্রথম সত্য এইচটিএমএল 5 ফুলস্ক্রিন ভিডিও ## ব্লগ.জিলিয়ন ডটকম / ২০১/0

— ওয়াউটার ডর্জেলো

Answer 1

এইচটিএমএল 5 কোনও ভিডিওকে পূর্ণ স্ক্রিন বানানোর কোনও উপায় সরবরাহ করে না, তবে সমান্তরাল ফুলস্ক্রিন বিশদটি সেই requestFullScreenপদ্ধতি সরবরাহ করে যা স্বেচ্ছাসেবী উপাদানগুলিকে ( <video>উপাদানগুলি সহ ) পূর্ণস্ক্রিন তৈরি করতে দেয়।

এটি বেশ কয়েকটি ব্রাউজারে পরীক্ষামূলকভাবে সমর্থন করে ।

---

আসল উত্তর:

থেকে HTML5 এর বৈশিষ্ট (: জুন '09 লেখার সময়):

ভিডিওগুলিকে পূর্ণ-স্ক্রিন দেখানোর জন্য ব্যবহারকারী এজেন্টদের কোনও সর্বজনীন API সরবরাহ করা উচিত নয়। একটি স্ক্রিপ্ট, সাবধানে তৈরি করা একটি ফাইল ফাইলের সাথে মিলিয়ে ব্যবহারকারীকে সিস্টেম-মডেল ডায়ালগটি দেখানোর জন্য ভাবতে প্ররোচিত করতে পারে এবং ব্যবহারকারীকে একটি পাসওয়ার্ডের জন্য অনুরোধ জানাতে পারে। লিঙ্কগুলি ক্লিক করা হয় বা পৃষ্ঠাগুলি নেভিগেট করলে পৃষ্ঠাগুলি পূর্ণ-স্ক্রিন ভিডিও চালু করে "নিছক" বিরক্তির ঝুঁকিও রয়েছে। পরিবর্তে, ব্যবহারকারীকে সহজেই একটি পূর্ণ-স্ক্রিন প্লেব্যাক মোডটি পাওয়ার অনুমতি দেওয়ার জন্য ব্যবহারকারী-এজেন্ট নির্দিষ্ট ইন্টারফেস বৈশিষ্ট্য সরবরাহ করা যেতে পারে।

ব্রাউজারগুলি একটি ব্যবহারকারী ইন্টারফেস সরবরাহ করতে পারে, তবে প্রোগ্রামযোগ্য একটি সরবরাহ করা উচিত নয়।

---

নোট করুন যে উপরের সতর্কতাটি স্পেসিফিকেশন থেকে সরানো হয়েছে।

Answer 2

এখানে বেশিরভাগ উত্তর পুরানো।

ফুলস্ক্রিন এপিআই ব্যবহার করে যে কোনও উপাদানকে ফুলস্ক্রিনে আনতে এখনই সম্ভব , যদিও এটি এখনও বেশ বিড়বিড় করে কারণ আপনি কেবল div.requestFullScreen()সমস্ত ব্রাউজারে কল করতে পারবেন না , তবে ব্রাউজার নির্দিষ্ট প্রিফিক্সড পদ্ধতি ব্যবহার করতে হবে।

আমি একটি সাধারণ মোড়কের স্ক্রিনফুল.জেএস তৈরি করেছি যা ফুলস্ক্রিন এপিআই ব্যবহার করা সহজ করে তোলে।

বর্তমান ব্রাউজার সমর্থনটি হ'ল:

• ক্রোম 15+
• ফায়ারফক্স 10+
• সাফারি 5.1+

মনে রাখবেন যে অনেক মোবাইল ব্রাউজার এখনও পুরো পর্দার বিকল্পটিকে সমর্থন করে না ।

Comments

এটা কাজ করছে না. পূর্ণ স্ক্রিন প্রয়োগ করা হলে আইফ্রেমে 1 এর আইফ্রেমে 2 থেকে চাইল্ড আইফ্রেম 2 থাকে এটি কিছুই করে না।

রিডমি থেকে ইউয়্যুম ইয়ুম: "যদি আপনার পৃষ্ঠাটি <iframe> এর ভিতরে থাকে তবে আপনাকে একটি অনুমতিগ্রহস্ক্রিন অ্যাট্রিবিউট (+ ওয়েবকিটাল্লোফুলস্ক্রিন এবং মোজিলফুলস্ক্রিন) যুক্ত করতে হবে।"

— সিন্দ্রে সোরহুস

ডেমো অ্যান্ড্রয়েড 4.3 এর ডিফল্ট ব্রাউজারের সাথে কাজ করবে না বলে মনে হচ্ছে।

— কাই নোক

@ সিন্ডারসোরাস এখন এই সমর্থন মোবাইল ব্রাউজ ??

— উদারা সুরঙ্গা

Answer 3

সাফারি এর মাধ্যমে সমর্থন করে webkitEnterFullscreen।

এটি ওয়েবকিট থেকেও ক্রোমের সমর্থন করা উচিত, তবে ত্রুটিগুলি আউট।

ফায়ারফক্সের ক্রিস ব্লিজার্ড বলেছেন যে তারা তাদের নিজস্ব স্ক্রিনের পুরো সংস্করণ নিয়ে আসছে যা কোনও উপাদানকে পূর্ণস্ক্রিনে যেতে দেবে। যেমন ক্যানভাস

অপেরা ফিলিপ জ্যাগেনস্টেট বলেছেন যে তারা পরবর্তী প্রকাশে এটি সমর্থন করবেন।

হ্যাঁ, এইচটিএমএল 5 ভিডিও অনুচ্ছেদে ফুলস্ক্রিন সমর্থন না করার কথা বলা হয়েছে, তবে যেহেতু ব্যবহারকারীরা এটি চান এবং প্রতিটি ব্রাউজার এটি সমর্থন করে চলেছে, তাই অনুমানটি পরিবর্তন হবে।

Comments

এই উত্তরটি পুরানো হয়ে গেছে, সিন্দ্রে সোরহুসের উত্তর দেখুন (এবং তারপরে এটি ভোট দিয়ে দিন যাতে এটি উত্তরোত্তর উত্তরগুলিকে ছাড়িয়ে যায়)

— ম্যাট

Answer 4

webkitEnterFullScreen();

এটির জন্য ভিডিও ট্যাগ উপাদানটিতে কল করা প্রয়োজন, উদাহরণস্বরূপ, পৃষ্ঠাতে প্রথম ভিডিও ট্যাগটির পুরো স্ক্রীন ব্যবহার করতে:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

বিজ্ঞপ্তি: এটি পুরানো উত্তর এবং আর প্রাসঙ্গিক।

Comments

এই উত্তরটি পুরানো হয়ে গেছে, সিন্দ্রে সোরহুসের উত্তর দেখুন (এবং তারপরে এটি ভোট দিয়ে দিন যাতে এটি উত্তরোত্তর উত্তরগুলিকে ছাড়িয়ে যায়)

— ম্যাট

ক্রোম বা ক্রোমিয়ামে এবং নোড-ওয়েবকিতে কাজ করা!

— বিশ

Answer 5

অনেক আধুনিক ওয়েব ব্রাউজার একটি ফুলস্ক্রিন এপিআই প্রয়োগ করেছে যা আপনাকে নির্দিষ্ট এইচটিএমএল উপাদানগুলিকে পূর্ণ স্ক্রিন ফোকাস দেওয়ার অনুমতি দেয়। সম্পূর্ণ নিমজ্জনশীল পরিবেশে ভিডিওর মতো ইন্টারেক্টিভ মিডিয়া প্রদর্শনের জন্য এটি সত্যই দুর্দান্ত।

পূর্ণ স্ক্রীন বোতামটি কাজ করতে আপনাকে অন্য ইভেন্ট শ্রোতা সেট আপ করতে হবে requestFullScreen()যা বোতামটি ক্লিক করা হলে ফাংশনটি কল করবে । এটি সমস্ত সমর্থিত ব্রাউজারগুলিতে কাজ করবে কিনা তা নিশ্চিত করার জন্য আপনাকে যাচাই করা দরকার কিনা তা পরীক্ষা করে দেখতে হবে requestFullScreen()এবং এটি বিক্রেতারের পূর্বনির্ধারিত সংস্করণগুলিতে ( mozRequestFullScreenএবং webkitRequestFullscreen) যদি না থাকে তবে তা পরীক্ষা করে দেখতে হবে।

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

তথ্যসূত্র: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/USS_full_screen_mode উল্লেখ: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -videos

Answer 6

আমি মনে করি যে আমাদের কোনও ব্রাউজারে কোনও বদ্ধ উত্স প্লাগইন (এবং ফ্ল্যাশ প্লাগইনের ইতিহাসের সাথে আসা সমস্ত সুরক্ষা লঙ্ঘন ...) ছাড়া ভিডিও দেখতে একটি মুক্ত উপায় থাকতে চাই। ট্যাগটিতে পূর্ণ পর্দা সক্রিয় করার জন্য একটি উপায় খুঁজে পেতে হবে .. আমরা ফ্ল্যাশ করার মতো এটি হ্যান্ডেল করতে পারি: ফুলস্ক্রিন করার জন্য, এটি আপনার মাউসের সাথে বাম ক্লিক দ্বারা সক্রিয় করতে হবে এবং অন্য কিছুই নয়, আমি বোঝাতে চাইছি এটি চালু করা অ্যাকশনস্ক্রিপ্ট দ্বারা সম্ভব নয় উদাহরণস্বরূপ ফ্ল্যাশ লোড করার সময় পূর্ণস্ক্রিন।

আমি আশা করি আমি যথেষ্ট পরিষ্কার হয়েছি: সর্বোপরি, আমি কেবল একজন ফরাসি আইটি ছাত্র, একজন ইংরেজি কবি নয় :)

দেখা হবে!

Answer 7

সিএসএস থেকে

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Comments

এটি সত্যিই পূর্ণস্ক্রিন নয়।

— রামেন শেফ

Answer 8

ফুলস্ক্রিন করার একটি প্রোগ্রামযোগ্য উপায় এখন ফায়ারফক্স এবং ক্রোম উভয়টিতে (তাদের সর্বশেষ সংস্করণে) কাজ করছে। সুসংবাদটি হ'ল এখানে একটি অনুমানের খসড়া তৈরি করা হয়েছে:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

আপনাকে এখনও আপাতত বিক্রেতার উপসর্গগুলি মোকাবেলা করতে হবে তবে সমস্ত বাস্তবায়ন বিশদ এমডিএন সাইটে সন্ধান করা হচ্ছে:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Answer 9

আপনি প্রস্থ এবং উচ্চতাটি 100% এ পরিবর্তন করতে পারেন তবে এটি ব্রাউজার ক্রোম বা ওএস শেলকে কভার করবে না।

ডিজাইন সিদ্ধান্ত কারণ ব্রাউজার উইন্ডোতে এইচটিএমএল থাকে inside ফ্ল্যাশ প্লাগইনগুলি উইন্ডোর অভ্যন্তরে নেই, তাই তারা পুরো স্ক্রিনে যেতে পারে।

এটি অর্থবোধ করে, অন্যথায় আপনি ইমেল ট্যাগগুলি তৈরি করতে পারেন যা শেলটি আচ্ছাদিত করতে পারে, বা এইচ 1 ট্যাগ তৈরি করতে পারে যাতে পুরো স্ক্রিনটি একটি চিঠি ছিল।

Answer 10

না, এইচটিএমএল 5-তে ফুলস্ক্রিন ভিডিও রাখা সম্ভব নয় আপনি যদি কারণগুলি জানতে চান তবে আপনি ভাগ্যবান কারণ ফুলস্ক্রিনের পক্ষে যুক্তি যুদ্ধটি এখনই লড়াই হয়েছে। দেখুন WHATWG মেইলিং লিস্ট এবং শব্দ "ভিডিও" খুঁজুন। আমি ব্যক্তিগতভাবে আশা করি যে তারা এইচটিএমএল 5 এ ফুলস্ক্রিন এপিআই সরবরাহ করবে।

Comments

সেই মেলিং তালিকার লিঙ্কটির জন্য বড় +1।

— mwilcox

Answer 11

ফায়ারফক্স ৩.6 এর এইচটিএমএল 5 ভিডিওর জন্য একটি পূর্ণ স্ক্রিন বিকল্প রয়েছে, ভিডিওটিতে ডান ক্লিক করুন এবং 'পূর্ণ স্ক্রিন' নির্বাচন করুন।

সর্বশেষতম ওয়েবকিট নাইটলিজগুলি পূর্ণ স্ক্রিন এইচটিএমএল 5 ভিডিওকে সমর্থন করে, সাব্লাইম প্লেয়ারটি চেষ্টা করে সর্বশেষ রাতের সাথে এবং পূর্ণ স্ক্রিন বিকল্পটি নির্বাচন করার সময় সিএমডি / সিটিআরএল ধরে রাখে।

আমার ধারণা ক্রোম / অপেরাও এরকম কিছু সমর্থন করবে। আশা করি আইই 9 সম্পূর্ণ পর্দার এইচটিএমএল 5 ভিডিওকে সমর্থন করবে।

Answer 12

ওয়েবকিট এন্টারফুলস্ক্রিনের মাধ্যমে ওয়েবকিটে এটি সমর্থিত ।

Answer 13

বিকল্প সমাধানটি প্রাসঙ্গিক মেনুতে কেবল এই বিকল্পটি সরবরাহ করতে হবে provide এটি করার জন্য জাভাস্ক্রিপ্ট থাকার দরকার নেই, তবে কখন এটি কার্যকর হবে তা আমি দেখতে পেতাম।

মাঝামাঝি সময়ে একটি বিকল্প সমাধান হ'ল উইন্ডো সর্বাধিক করা (জাভাস্ক্রিপ্ট স্ক্রিনের মাত্রা সরবরাহ করতে পারে) এবং তারপরে ভিডিওটি সর্বাধিক করে তোলা। এটিকে একবার দেখুন এবং তারপরে ফলাফলগুলি আপনার ব্যবহারকারীদের কাছে গ্রহণযোগ্য কিনা তা কেবল দেখুন।

Answer 14

এইচটিএমএল 5 ভিডিওটি সাফারিটির সর্বশেষতম রাতের বিল্ডে ফুলস্ক্রিনে যায়, যদিও এটি প্রযুক্তিগতভাবে কীভাবে সম্পন্ন হয়েছে তা আমি নিশ্চিত নই।

Comments

নেতিবাচক ভোট কেন? সাফারি 5 এর স্থানীয় নিয়ন্ত্রণে ফুলস্ক্রিন রয়েছে। (যদিও এপিআই নেই! Grrrr)

— mwilcox

Answer 15

সম্পূর্ণ সমাধান:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Answer 16

আপনার কাছে যদি আপনার সাইটটিকে প্রগতিশীল ওয়েব অ্যাপ (পিডাব্লুএ) হিসাবে সংজ্ঞায়িত করার বিকল্প থাকে তবে ম্যানিফেস্ট.জেসনেরdisplay: "fullscreen" অধীনে ব্যবহার করার বিকল্পও রয়েছে । তবে এটি কেবল তখনই কাজ করবে যদি ব্যবহারকারী আপনার ওয়েব অ্যাপ্লিকেশনটিকে হোম স্ক্রিনে যুক্ত করে / ইনস্টল করে এবং সেখান থেকে এটি খুলবে।

Answer 17

হ্যাঁ. ঠিক আছে এইচটিএমএল 5 ভিডিওর সাথে যা ঘটে তা হ'ল আপনি কেবল <video>ট্যাগটি রেখেছেন এবং ব্রাউজারটি এটির নিজস্ব ইউআই দেবে এবং এভাবে পূর্ণ স্ক্রীন দেখার ক্ষমতা। এটি ফ্ল্যাশ খেলছেন এমন কিছু "বিকাশকারী" আর্ট "দেখতে না পারা ব্যবহারকারীদের পক্ষে সত্যই জীবনকে আরও উন্নত করে তোলে :) এটি প্ল্যাটফর্মেও ধারাবাহিকতা যুক্ত করে, যা দুর্দান্ত।

Answer 18

এটি সহজ, সমস্ত সমস্যা এইভাবে সমাধান করা যেতে পারে,

1) পালাতে সর্বদা আপনাকে পূর্ণস্ক্রিন মোড থেকে বাইরে নিয়ে যেতে হবে (এফ 11 এর মাধ্যমে ম্যানুয়ালি ফুলস্ক্রিনে প্রবেশের ক্ষেত্রে এটি প্রযোজ্য নয়)

2) অস্থায়ীভাবে ফুল স্ক্রিন ভিডিও মোড প্রবেশ করানো বলে একটি ছোট ব্যানার প্রদর্শন করুন (ব্রাউজার দ্বারা)

3) ডিফল্টরূপে পূর্ণস্ক্রিন অ্যাকশনটি ব্লক করুন, ঠিক যেমনটি এইচটিএমএল 5 এবং লোকেশন এপিআই এবং ইত্যাদিতে পপ-আপ এবং স্থানীয় ডাটাবেসগুলির জন্য করা হয়েছে been

আমি এই নকশা নিয়ে কোনও সমস্যা দেখছি না। কেউ কি মনে করেন আমি কিছু মিস করেছি?

Comments

এটি প্রশ্নের উত্তর দেয় না।

— রামনেন শেফ

Answer 19

ক্রোম 11.0.686.0 হিসাবে দেব চ্যানেল ক্রোমের এখন পূর্ণস্ক্রিন ভিডিও রয়েছে।

Answer 20

আপনি যদি ব্যবহারকারীকে F11 টি চাপতে বলেন (অনেক ব্রাউজারের জন্য পূর্ণ পর্দা), এবং আপনি পৃষ্ঠার পুরো অংশে ভিডিও রেখেছেন তবে আপনি এটি করতে পারেন।

Answer 21

যদি এই উত্তরগুলির কোনওটিই কাজ না করে (যেমন তারা আমার পক্ষে করেনি) তবে আপনি দুটি ভিডিও সেট আপ করতে পারেন। একটি নিয়মিত আকারের জন্য এবং অন্য ফুলস্ক্রিন আকারের জন্য। আপনি যখন পূর্ণস্ক্রিনে স্যুইচ করতে চান

1. পূর্ণ স্ক্রিন ভিডিওর 'src' বৈশিষ্ট্যটি ছোট ভিডিওগুলিতে 'src' বৈশিষ্ট্যে সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করুন
2. পূর্ণস্ক্রিন ভিডিওতে ভিডিও কন্টেন্টটাইম সেট করুন ছোট ভিডিওর মতো।
3. ছোট ভিডিও লুকানোর জন্য সিএসএস 'ডিসপ্লে: কিছুই নয়' ব্যবহার করুন এবং 'পজিশন: পরম' এবং 'জেড-ইনডেক্স: 1000' বা সত্যই উচ্চতর কিছু দিয়ে বড়টিকে প্রদর্শন করুন।