SamsungVR Integration
Theta Video Player
Place this iframe where you would like to play the video. The player is already integrated with Theta and will work automatically.
<iframe src="https://www.sliver.tv/player/index.html?videoId=vid2dz369du0mkwcrb9&useTheta=true&is360Video=true&shouldPollVideo=true"></iframe>
Include JS script
Place a script tag into your html page's head tag.
<script type="application/javascript" src="https://theta-web-widgets.thetatoken.org/js/ThetaWebWidgets.js"></script>
Optionally, you can load the script asynchronously and be notified when it has loaded by using the callback query param. The callback function must be defined on the window object.
<script>
window.onThetaWebWidgetsLoad = function(){
//Setup Widgets here
};
</script>
<script type="application/javascript" src="https://theta-web-widgets.thetatoken.org/js/ThetaWebWidgets.js?callback=onThetaWebWidgetsLoad" async defer></script>
Widget placeholder div
Place an empty div into your html page where you'd like to place the Theta web widget. Replace 'MY_THETA_WEB_WIDGET_ID' with your desired element ID. This will be used below.
<div id="MY_THETA_WEB_WIDGET_ID"></div>
Initialize Theta web widget
var widget = new ThetaWebWidgets.OverviewWithTrafficChartWidget();
widget.setTheme(ThetaWebWidgets.Themes.Light);
widget.setMainMessage("Welcome to the Samsung-Theta Testnet. Help us test blockchain video sharing and earn Gamma tokens.");
widget.render("MY_THETA_WEB_WIDGET_ID");
The Theta web widget will render inside of your placeholder div and will automatically display data from your Theta library displaying video.
Please note, at this time, there can only be 1 instance of the Theta library connected to the widget. Typically sites only display one video at a time.
Full example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SamsungVR + Theta</title>
<script type="application/javascript" src="https://theta-web-widgets.thetatoken.org/js/ThetaWebWidgets.js?v=14"> </script>
<script type="application/javascript">
function startApp(){
var thetaWidget = new ThetaWebWidgets.OverviewWithTrafficChartWidget();
thetaWidget.setTheme(ThetaWebWidgets.Themes.Light);
thetaWidget.setMainMessage("Welcome to the Samsung-Theta Testnet. Help us test blockchain video sharing and earn Gamma tokens.");
thetaWidget.render("svr-theta-widget");
}
</script>
</head>
<body onload="startApp()">
<!-- Theta Player -->
<iframe src="https://www.sliver.tv/player/index.html?videoId=vid2dz369du0mkwcrb9&useTheta=true&is360Video=true&shouldPollVideo=true"></iframe>
<!-- Theta Widget Placeholder -->
<div id="svr-theta-widget"></div>
</body>
</html>
Full example (Async)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SamsungVR + Theta</title>
<script>
window.onThetaWebWidgetsLoad = function(){
var thetaWidget = new ThetaWebWidgets.OverviewWithTrafficChartWidget();
thetaWidget.setTheme(ThetaWebWidgets.Themes.Light);
thetaWidget.setMainMessage("Welcome to the Samsung-Theta Testnet. Help us test blockchain video sharing and earn Gamma tokens.");
thetaWidget.render("svr-theta-widget");
};
</script>
<script type="application/javascript" src="https://theta-web-widgets.thetatoken.org/js/ThetaWebWidgets.js?v=14&callback=onThetaWebWidgetsLoad" async defer></script>
</head>
<body>
<!-- Theta Player -->
<iframe src="https://www.sliver.tv/player/index.html?videoId=vid2dz369du0mkwcrb9&useTheta=true&is360Video=true&shouldPollVideo=true"></iframe>
<!-- Theta Widget Placeholder -->
<div id="svr-theta-widget"></div>
</body>
</html>