react-native-webview-video
Version:
react-native-webview-video is a React Native library that provides a Video component that renders media content such as videos with custom controls for react-native and react-native-web. Support Youtube and Vimeo.
178 lines (177 loc) • 7.07 kB
JavaScript
export function vimeoHTML(videoId) {
return `
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Vimeo Player Webview</title>
<meta charset="utf-8">
<meta name="author" content="santran686@gmail.com">
<meta name="author" content="chainplatform.net">
<style>
html {
overflow-y: hidden;
overflow-x: hidden;
height: 100%;
}
body {
background-color: transparent;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.embed-container {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
max-width: 100%;
width: 100%;
height: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="embed-container"><div id="player"></div></div>
<script>
const parsedUrl = new URL(window.location.href), videoId = parsedUrl.searchParams.get("videoId"), videoType = parsedUrl.searchParams.get("videoType");
let tag = document.createElement('script');
tag.src = "https://player.vimeo.com/api/player.js";
let lastTimeUpdate = 0;
let player;
let options = {
loop: false,
autopause: false,
byline: false,
cc: false,
chromecast: false,
controls: false,
fullscreen: false,
keyboard: false,
progress_bar: false,
title: false,
transcript: false,
vimeo_logo: false,
dnt: true
};
if (videoType == "id") {
options.id = '${videoId}';
} else {
options.url = '${videoId}';
}
tag.onload = () => {
player = new Vimeo.Player('player', options);
player.ready().then(function () {
player.getDuration().then(function (duration) {
sendMessageToParent({ eventType: "playerReady", data: null });
sendMessageToParent({ eventType: "initialDelivery", data: { duration: duration, currentTime: 0 } });
}).catch(function (error) {});
player.on('playbackratechange', function (data) {
// sendMessageToParent({ eventType: "playbackRateChange", data: data })
});
player.on('qualitychange', function (data) {
// sendMessageToParent({ eventType: "playerQualityChange", data: data })
});
player.on('error', function (data) {
sendMessageToParent({ eventType: "playerError", data: data })
});
player.on('timeupdate', function (infos) {
// if (typeof infos.seconds != "undefined") {
// var time = Math.floor(infos.seconds);
// if (time !== lastTimeUpdate) {
// lastTimeUpdate = time;
// sendMessageToParent({ eventType: "infoDelivery", data: { duration: infos.duration, currentTime: time } });
// }
// }
});
player.on('progress', function (infos) {
// if (typeof infos.seconds != "undefined") {
// sendMessageToParent({ eventType: "initialDelivery", data: { duration: infos.duration, currentTime: infos.seconds } });
// }
});
});
let updateTime;
player.on('play', function (data) {
updateTime = setInterval(() => {
player.getCurrentTime().then(function (seconds) {
var time = Math.floor(seconds);
if (time !== lastTimeUpdate) {
lastTimeUpdate = time;
sendMessageToParent({ eventType: "infoDelivery", data: { currentTime: time } });
}
}).catch(function (error) { });
}, 250);
});
player.on('ended', function () {
if (updateTime) { clearInterval(updateTime); }
sendMessageToParent({ eventType: "playerStateChange", data: 0 })
});
};
tag.onerror = () => { };
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function sendMessageToParent(event) {
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(event), '*');
}
window.addEventListener("message", function (events) {
let infos = events.data;
if (typeof events.data != "object") {
infos = JSON.parse(events.data);
}
switch (infos.event) {
case "playVideo":
player.play().then(function () { }).catch(function (error) {
switch (error.name) {
case 'PasswordError':
break;
case 'PrivacyError':
break;
default:
break;
}
});
break;
case "pauseVideo":
player.pause().then(function () { }).catch(function (error) {
switch (error.name) {
case 'PasswordError':
break;
case 'PrivacyError':
break;
default:
break;
}
});
break;
case "stopVideo":
player.pause().then(function () { }).catch(function (error) {
switch (error.name) {
case 'PasswordError':
break;
case 'PrivacyError':
break;
default:
break;
}
});
break;
case "volumeOff":
player.setMuted(true).then(function (muted) {}).catch(function (error) { });
break;
case "volumeOn":
player.setMuted(false).then(function (muted) { }).catch(function (error) { });
break;
}
})
</script>
</body>
</html>`
}