마음의 안정을 찾기 위하여 - [JavaScript] 브라우저 자동 재생정책 설정
2401035
52
340
관리자새글쓰기
태그위치로그방명록
별일없다의 생각
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 3
Trackback URL :: 이 글에는 트랙백을 보낼 수 없습니다
From. Pranie_tapicerki 2024/11/18 20:13
답글달기삭제
Przeogromne z powodu dla admina w środku ściśle mówiąc jasne zaś czytelne rozbudowa tej tematyki. Właśnie tego szukałem. Przyznaję się bez bicia, iż niezwykle zaintrygował mnie ów artykuły, pomimo, iż aż tak nie interesuję się tego rodzaju sprawami. U mnie tak: pranie tapicerki
From. detectiveitaly 2024/11/18 22:49
답글달기삭제
No, no za taki artykuł powinni przyznać złote medale. A tak na serio, to ogromne dzięki za wyczerpujące rozwinięcie tematu i wyjaśnienie kilku kwestii. Zapraszam do mnie Italian Private Investigator
From. Witek 2024/11/30 04:41
답글달기삭제
Duża dawka informacji. Widzę, że trzeba będzie bardziej zainteresować tematyką.
Wiedza przedstawiona w ciekawej formie. Dzięki za teksty. Zapraszam na moją stronę monitoring CCTV Łódź
PREV : [1] : NEXT
 
 
 
 
PREV : [1][2][3][4][5] ... [1323] :
«   2024/12   »
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 31        
전체 (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)