마음의 안정을 찾기 위하여 - [JavaScript] 브라우저 자동 재생정책 설정
2386816
333
341
관리자새글쓰기
태그위치로그방명록
별일없다의 생각
dawnsea's me2day/2010
색상(RGB)코드 추출기(Color...
Connection Generator/2010
최승호PD, '4대강 거짓말 검...
Green Monkey**/2010
Syng의 생각
syng's me2DAY/2010
천재 작곡가 윤일상이 기획,...
엘븐킹's Digital Factory/2010
[JavaScript] 브라우저 자동 재생정책 설정
Web, Script/JavaScript | 2024/07/19 14:25

1. 브라우저에서 자동 재생 정책 설정

Chrome

  1. Chrome 설정:
    • 주소창에 chrome://settings/content/autoplay 입력 후 Enter를 누릅니다.
    • 자동 재생 설정을 찾아 사이트에서 오디오를 자동 재생할 수 있도록 허용 옵션을 선택합니다.
  2. 사이트별 설정:
    • 주소창에 chrome://settings/content 입력 후 Enter를 누릅니다.
    • 자동 재생 섹션에서 특정 사이트에 대해 자동 재생을 허용하거나 차단할 수 있습니다.

Firefox

  1. Firefox 설정:
    • 주소창에 about:preferences#privacy 입력 후 Enter를 누릅니다.
    • 권한 섹션에서 자동 재생을 클릭하고 사이트별로 허용 설정을 합니다.
  2. 사이트별 설정:
    • 사이트를 방문할 때 자동 재생 정책을 설정하려면, 사이트 정보 (주소창에서 자물쇠 아이콘 클릭)에서 권한을 클릭하여 자동 재생을 설정할 수 있습니다.

Safari

  1. Safari 설정:
    • Safari 메뉴에서 환경설정을 클릭한 후 웹사이트 탭으로 이동합니다.
    • 자동 재생을 선택하고, 사이트별로 자동 재생 설정을 변경할 수 있습니다.
  2. 사이트별 설정:
    • 환경설정웹사이트 탭에서 자동 재생을 설정하여, 사이트별로 자동 재생을 허용하거나 차단할 수 있습니다.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Viewer</title>
  <style>
    #media-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #media-container img,
    #media-container video {
      max-width: 100%;
      max-height: 100%;
    }
    #media-container img.fit,
    #media-container video.fit {
      width: 100%;
      height: auto;
    }
    #media-container img.original,
    #media-container video.original {
      width: auto;
      height: auto;
    }
  </style>
</head>
<body>
  <div id="media-container"></div>
  <button id="prev-button">Previous</button>
  <button id="next-button">Next</button>

  <script>
    const mediaData = [
      {
        "type": "image",
        "src": "path/to/image1.jpg",
        "duration": 3000,
        "size": "original"
      },
      {
        "type": "video",
        "src": "path/to/video1.mp4",
        "duration": 0,
        "size": "fit"
      },
      {
        "type": "image",
        "src": "path/to/image2.jpg",
        "duration": 5000,
        "size": "fit"
      },
      {
        "type": "video",
        "src": "path/to/video2.mp4",
        "duration": 10000,
        "size": "original"
      }
    ];

    let currentIndex = 0;
    const mediaContainer = document.getElementById('media-container');
    const prevButton = document.getElementById('prev-button');
    const nextButton = document.getElementById('next-button');
    let timer = null;

    function displayMedia(index) {
      clearTimeout(timer);
      mediaContainer.innerHTML = '';
      const media = mediaData[index];

      const mediaElement = document.createElement(media.type === 'image' ? 'img' : 'video');
      mediaElement.src = media.src;
      if (media.type === 'image') {
        mediaElement.alt = 'Media Image';
      } else {
        mediaElement.controls = true;
        mediaElement.autoplay = true;
        mediaElement.muted = true;
      }

      if (media.size === 'fit') {
        mediaElement.classList.add('fit');
      } else if (media.size === 'original') {
        mediaElement.classList.add('original');
      }

      mediaElement.onerror = function() {
        nextMedia();
      };

      mediaElement.onload = function() {
        mediaContainer.appendChild(mediaElement);

        if (media.type === 'image') {
          timer = setTimeout(nextMedia, media.duration);
        }
      };

      if (media.type === 'video') {
        mediaElement.addEventListener('canplay', function() {
          mediaContainer.appendChild(mediaElement);
          if (media.duration === 0) {
            mediaElement.addEventListener('ended', nextMedia);
          } else {
            timer = setTimeout(nextMedia, media.duration);
          }
          mediaElement.play();
          document.addEventListener('click', unmuteOnClick);
          document.addEventListener('keydown', unmuteOnClick);
        });
      }

      mediaContainer.appendChild(mediaElement);
    }

    function unmuteOnClick() {
      const mediaElement = mediaContainer.querySelector('video');
      if (mediaElement) {
        setTimeout(() => {
          mediaElement.muted = false;
        }, 1000);
        document.removeEventListener('click', unmuteOnClick);
        document.removeEventListener('keydown', unmuteOnClick);
      }
    }

    function nextMedia() {
      if (currentIndex < mediaData.length - 1) {
        currentIndex++;
      } else {
        currentIndex = 0;
      }
      displayMedia(currentIndex);
    }

    function prevMedia() {
      if (currentIndex > 0) {
        currentIndex--;
      } else {
        currentIndex = mediaData.length - 1;
      }
      displayMedia(currentIndex);
    }

    prevButton.addEventListener('click', prevMedia);
    nextButton.addEventListener('click', nextMedia);

    // Initialize with the first media item
    displayMedia(currentIndex);
  </script>
</body>
</html>
2024/07/19 14:25 2024/07/19 14:25
Article tag list Go to top
View Comment 0
Trackback URL :: 이 글에는 트랙백을 보낼 수 없습니다
 
 
 
 
PREV : [1][2][3][4][5] ... [1323] :
«   2024/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
전체 (1323)
출판 준비 (0)
My-Pro... (41)
사는 ... (933)
블로그... (22)
My Lib... (32)
게임 ... (23)
개발관... (3)
Smart ... (1)
Delphi (93)
C Builder (0)
Object... (0)
VC, MF... (10)
Window... (1)
Open API (3)
Visual... (0)
Java, JSP (2)
ASP.NET (0)
PHP (6)
Database (12)
리눅스 (29)
Windows (25)
Device... (1)
Embedded (1)
게임 ... (0)
Web Se... (2)
Web, S... (21)
잡다한... (7)
프로젝트 (0)
Personal (0)
대통령... (13)
Link (2)