웹 페이지에서 비디오 및 오디오로 수익을 창출하는 방법
10938 단어 webmonetizationgftwhackathon
먼저 비디오와 오디오가 포함된 기본 HTML 페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monetize Audio and Video</title>
</head>
<body>
<main>
<p id="state"></p>
<video class="mediaEl" src="files/videoplayback.mp4" controls></video>
<br>
<audio class="mediaEl" src="files/videoplayback.mp4" controls></audio>
</main>
브라우저에서 수익 창출이 지원되는지 확인합니다.
if (!document.monetization) {
const state = document.getElementById('state')
state.innerText = 'monetization not enabled in browser';
state.style.color = 'red';
}
다음으로 수익 창출 이벤트 리스너를 추가하여 현재 수익 창출 상태를 표시합니다.
function showMonetizationState() {
document.getElementById('state').innerText = document.monetization.state;
}
if (document.monetization) {
document.monetization.addEventListener(
"monetizationstop",
showMonetizationState
);
document.monetization.addEventListener(
"monetizationstart",
showMonetizationState
);
document.monetization.addEventListener(
"monetizationpending",
showMonetizationState
);
document.monetization.addEventListener(
'monetizationprogress',
showMonetizationState
);
}
그런 다음 수익 창출 메타 태그를 추가하고 제거하는 두 가지 기능을 생성합니다. 이러한 기능은 수익 창출 시작 및 중지를 담당합니다.
// add meta
function addMonitizationMetaTag() {
// check if monetization meta tag is already set
if (document.querySelector('meta[name="monetization"]')) return;
monetizationTag = document.createElement('meta');
monetizationTag.name = 'monetization';
monetizationTag.content = 'your_payment_pointer'
document.head.appendChild(monetizationTag);
}
// remove meta
function removeMonitizationMetaTag() {
const meta = document.querySelector('meta[name="monetization"]');
meta.remove();
}
마지막으로 미디어 요소를 가져오고 이벤트 리스너를 연결하여 미디어가 재생될 때 수익 창출을 시작하고 콘텐츠가 중지되거나 로드될 때 수익 창출을 중지합니다.
const mediaEl = document.querySelectorAll('.mediaEl');
mediaEl.forEach(el => {
el.addEventListener('play', addMonitizationMetaTag);
el.addEventListener('playing', addMonitizationMetaTag);
el.addEventListener('waiting', removeMonitizationMetaTag);
el.addEventListener('pause', removeMonitizationMetaTag);
});
테스트
앱을 테스트하려면 coil 브라우저 확장 프로그램을 설치했는지 확인하세요. 코일 아이콘에 녹색 달러 배지가 표시되어 결제할 때 표시됩니다.
코드 링크
갓윈9911 / 수익 창출 비디오 오디오
추가 학습 리소스
Reference
이 문제에 관하여(웹 페이지에서 비디오 및 오디오로 수익을 창출하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/godwinagedah/how-to-monetize-video-and-audio-2fhk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
