ایجاد یک دکمه تمام صفحه با جاوا اسکریپت (برای ویدیو و سایر عناصر HTML)

در این آموزش، شما یاد خواهید گرفت که چگونه یک عنصر را با استفاده از جاوا اسکریپت وارد حالت تمام صفحه در هر مرورگری کنید. API تمام صفحه.

“API تمام صفحه روش هایی را برای ارائه یک عنصر خاص و فرزندان آن در حالت تمام صفحه و خروج از حالت تمام صفحه هنگامی که دیگر به آن نیاز نیست اضافه می کند” – MDN

حالت تمام صفحه همه عناصر دیگر روی صفحه را حذف می کند (مانند نوار پیمایش مرورگر یا پایه دسکتاپ) و املاک موجود روی صفحه را با عنصر انتخاب شده پر می کند. یک مثال رایج هنگام اشتراک گذاری یک ارائه یا تماشای یک ویدیو به صورت تمام صفحه است.

یکی از مزیت‌های حالت تمام صفحه این است که به کاربر اجازه می‌دهد صرفاً روی عنصری که در حال مشاهده است تمرکز کند بدون اینکه حواسش توسط عناصر دیگر روی صفحه پرت شود. API FullScreen همچنین از رفتار پیش‌فرض سیستم استفاده می‌کند، بنابراین ما می‌توانیم از برخی ویژگی‌های داخلی بدون نیاز به نوشتن کد بیشتر، مانند فشار دادن خروج کلید بستن تمام صفحه

1. نشانه گذاری با HTML

برای نشانه گذاری خود، از a استفاده خواهیم کرد video عنصر و الف button عنصر برای تغییر حالت تمام صفحه ما.

از آنجایی که ما از یک دکمه تمام‌صفحه سفارشی برای عنصر ویدیوی خود استفاده می‌کنیم، باید کنترل‌های پیش‌فرض عنصر ویدیو را خاموش کنیم (نگران نباشید، همیشه می‌توانیم پس از فعال شدن حالت تمام صفحه، کنترل‌ها را برگردانیم). ما می توانیم این کار را با درج نکردن آن انجام دهیم controls صفت در ما video برچسب زدن

نشانه گذاری ما به این صورت است:

1

<main>

2

  <video id="video" autoplay loop muted>

3

    <source id='mp4' src="video-src.mp4" type='video/mp4' />

4

  </video>

5

6

  <button 

7

    class="full-screen" 

8

    title="Enter fullscreen mode"

9

    aria-label="Enter fullscreen mode"

10

  >

11

  </button>

12

</main>

2. استایل دهی با CSS

دکمه تمام صفحه را طوری استایل می کنیم که در وسط محفظه ویدیو قرار گیرد.

1

main {

2

  position: relative;

3

  height: auto;

4

}

5

6

video {

7

  min-height: 100vh;

8

  max-width: 100%;

9

  width: 100%;

10

  height: auto;

11

  padding: 0;

12

}

13

14

.full-screen {

15

  transition: 150ms;

16

  position: absolute;

17

  top: 0;

18

  bottom: 0;

19

  right: 0;

20

  left: 0;

21

  margin: auto;

22

  height: fit-content;

23

  width: fit-content;

24

  background-color: rgba(255, 255, 255, 0.5);

25

  border-color: transparent;

26

  border-radius: 50%;

27

  padding: 16px;

28

  display: flex;

29

  justify-content: center;

30

  align-items: center;

31

  outline: none;

32

  cursor: pointer;

33

}

34

35

.full-screen:hover {

36

  background-color: rgba(255, 255, 255, 1);

37

}

ما همچنین می توانیم از پرس و جو رسانه CSS استفاده کنیم hover برای تعیین نحوه عملکرد دکمه در دستگاه‌های شناور (مانند لپ‌تاپ) در مقابل دستگاه‌های لمسی (مانند تلفن‌های همراه). در این نسخه نمایشی، ما دکمه را طوری تنظیم می‌کنیم که همیشه در دستگاه‌های لمسی قابل مشاهده باشد و فقط زمانی که روی دستگاه‌های شناور قرار می‌گیرد قابل مشاهده باشد.

1

@media (hover: hover) {

2

  .full-screen {

3

    opacity: 0;

4

  }

5

6

  main:hover .full-screen {

7

    opacity: 1;

8

  }

9

}

3. عملکرد تمام صفحه

اکنون طرح و استایل خود را انجام داده ایم، می توانیم با استفاده از جاوا اسکریپت کارکرد را شروع کنیم.

ما عناصر مورد نظر را به عنوان متغیرهای جهانی ذخیره می کنیم.

1

const video = document.getElementById("video");

2

const fullscreenButton = document.querySelector(".full-screen");

با استفاده از شنونده رویداد، زمانی که روی دکمه تمام صفحه کلیک شده است و با API FullScreen تماس می گیریم. این را می توان با استفاده از .requestFullScreen() روش مستقیماً روی عنصری که قرار است تمام صفحه ساخته شود.

1

fullscreenButton.addEventListener("click", function () {

2

  video.requestFullscreen();

3

});

پشتیبانی از تمام صفحه در iOS

برای دستگاه‌های iOS، ما به روش دیگری نیاز داریم، بنابراین باید عملکرد خود را به‌روزرسانی کنیم تا آن را در نظر بگیریم.

1

fullscreenButton.addEventListener("click", function () {

2

  if (video.webkitSupportsFullscreen) {

3

    video.webkitEnterFullscreen();

4

    return;

5

  }

6

7

  video.requestFullscreen();

8

});

از آنجایی که وقتی ویدیو در حالت تمام صفحه است دیگر به دکمه جابجایی دسترسی نخواهیم داشت، به روش دیگری برای اطمینان از خروج کاربر از نمای تمام صفحه نیاز خواهیم داشت. خوشبختانه، کنترل‌های پیش‌فرض ویدیوی HTML5 شامل یک کلید تمام صفحه است، بنابراین می‌توانیم با نمایش کنترل‌های ویدیو پس از فعال شدن حالت تمام‌صفحه، از آن به نفع خود استفاده کنیم. نحوه انجام این کار را در بخش بعدی خواهیم دید.

شنونده رویداد تمام صفحه

شنونده رویداد خاصی برای تشخیص زمان ورود یا خروج مرورگر به حالت تمام صفحه وجود دارد. ما می توانیم تغییر حالت تمام صفحه را با fullscreenchange شنونده رویداد و همچنین تشخیص می دهد که آیا مرورگر در حال حاضر در حالت تمام صفحه است یا خیر fullscreenElement ویژگی. ویژگی دقیقاً عنصری را که در حال حاضر در نمای تمام صفحه است برمی گرداند یا برمی گرداند null اگر هیچ عنصری پیدا نشد

با استفاده از این دو ویژگی، می‌توانیم تغییراتی در عناصر خود ایجاد کنیم که آیا آنها در حالت تمام صفحه هستند یا نه.

در این نسخه نمایشی، هنگامی که ویدیو در حالت تمام صفحه قرار گرفت، کنترل‌های پیش‌فرض را به آن اضافه می‌کنیم و زمانی که دیگر در حالت تمام صفحه نیست با استفاده از setAttribute و removeAttribute مواد و روش ها.

1

document.addEventListener("fullscreenchange", function () {

2

  if (document.fullscreenElement) {

3

    video.setAttribute("controls", true);

4

    return;

5

  }

6

7

  video.removeAttribute("controls");

8

});

یک ظاهر طراحی شده به عناصر تمام صفحه

همچنین انتخابگرهای CSS برای طراحی عناصر در حالت تمام صفحه وجود دارد. این :fullscreen انتخابگر می تواند برای استایل دادن به عناصر زمانی که حالت تمام صفحه فعال است و ::backdrop از انتخابگر کاذب می توان برای استایل دادن به پس زمینه حالت تمام صفحه استفاده کرد.

این انتخابگرها توسط مرورگر برای اعمال استایل پیش فرض در حالت تمام صفحه استفاده می شوند.

5. استفاده از FullScreenAPI در عناصر غیر ویدئویی

در ابتدای این آموزش، من اشاره کردم که API FullScreen فقط در عناصر ویدیویی برای دستگاه های iOS به طور کامل پشتیبانی می شود. اکنون نگاهی به یک روش غیر متقابل مرورگر برای استفاده از API FullScreen در سایر عناصر خواهیم داشت.

در این نسخه ی نمایشی، ما API FullScreen را در چرخ فلکی که قبلاً در یک آموزش دیگر ایجاد کرده بودیم فراخوانی می کنیم.

اینم دموی جدید (نسخه بزرگتر در CodePen). به یاد داشته باشید، این پیاده سازی روی آیفون کار نخواهد کرد.

ما از طرح بندی آموزش چرخ فلک استفاده می کنیم و یک دکمه تمام صفحه اضافه می کنیم. ما همچنین از نمادهای SVG برای تغییر وضعیت نمایش دکمه بسته به فعال بودن یا نبودن حالت تمام صفحه استفاده خواهیم کرد.

نشانه گذاری ما به این صورت است:

1

<section class="slider-wrapper" id="wrapper">

2

3

  <button class="full-screen" title="Enter full screen mode">

4

    <svg class="full-screen--open"></svg>

5

6

    <svg class="full-screen--close"></svg>

7

  </button>

8

9

  <ul class="slides-container" id="slides-container">

10

  </ul>

11

</section>

یک تفاوت با این پیاده سازی این است که دکمه تمام صفحه از نسل عنصری است که ما تمام صفحه می سازیم، بنابراین همچنان در حالت تمام صفحه به آن دسترسی خواهیم داشت. به همین دلیل، می توانیم از همان دکمه برای خروج از حالت تمام صفحه نیز استفاده کنیم.

عناصر را دریافت کنید

ابتدا عناصری را که با جاوا اسکریپت هدف گذاری کرده ایم دریافت می کنیم:

1

const wrapper = document.getElementById("wrapper");

2

const fullscreenButton = document.querySelector(".full-screen");

از آنجایی که ما از دکمه جابجایی استفاده می کنیم، نیازی به تشخیص رویداد تغییر تمام صفحه نداریم زیرا می توانیم هر دو نمونه را در شنونده رویداد کلیک خود بررسی کنیم.

1

fullscreenButton.addEventListener("click", function () {

2

  if (document.fullscreenElement) {

3

    document.exitFullscreen()

4

  } else {

5

    if (wrapper.webkitSupportsFullscreen) {

6

      wrapper.webkitEnterFullscreen()

7

    } else {

8

      wrapper.requestFullscreen()

9

    }

10

  }

11

});

نمایش نماد را تغییر دهید

این requestFullScreen() و exitFullScreen() روش ها برمی گردند وعده می دهد بنابراین می‌توان یک تابع دیگر را زنجیره‌ای کرد تا زمانی که متدها با استفاده از آن اجرا شوند، انجام شود .then() روش.

ما می توانیم از این روش برای تغییر وضعیت نمایش نماد در دکمه تمام صفحه با افزودن و حذف یک کلاس استفاده کنیم is-active.

عملکرد به روز شده ما به این صورت است:

1

fullscreenButton.addEventListener("click", () => {

2

  if (document.fullscreenElement) {

3

    document

4

      .exitFullscreen()

5

      .then(() => fullscreenButton.classList.remove("is-active"));

6

  } else {

7

    if (wrapper.webkitSupportsFullscreen) {

8

      wrapper

9

        .webkitEnterFullscreen()

10

        .then(() => fullscreenButton.classList.add("is-active"));

11

    } else {

12

      wrapper

13

        .requestFullscreen()

14

        .then(() => fullscreenButton.classList.add("is-active"));

15

    }

16

  }

17

});

سپس می‌توانیم CSS خود را به‌روزرسانی کنیم تا آیکون مورد نظر خود را بر اساس نام کلاس نمایش دهد:

1

.full-screen:not(.is-active) .full-screen--close {

2

  display: none;

3

}

4

5

.full-screen.is-active .full-screen--open {

6

  display: none;

7

}

همچنین امکان دستیابی به همان اثر با استفاده از :fullscreen انتخابگر بدون نیاز به تغییر نام کلاس ها با جاوا اسکریپت.

با استفاده از :fullscreen انتخابگر، CSS ما به شکل زیر است:

1

.full-screen--close {

2

  display: none

3

}

4

5

:fullscreen .full-screen--open {

6

  display: none;

7

}

8

9

:fullscreen .full-screen--close {

10

  display: block;

11

}

نتیجه

و این همه، مردمی! در این آموزش، نحوه پیاده سازی API تمام صفحه جاوا اسکریپت، شامل چند مورد استفاده و هشدارها را آموخته اید.