-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
52 lines (48 loc) · 1.87 KB
/
example.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenVideoPlayer example</title>
<script src="OpenVideoPlayer.js"></script>
<link rel="stylesheet" type="text/css" href="OpenVideoPlayer.css">
</head>
<body>
<h1>An OpenVideoPlayer example</h1>
<div id="container"></div>
<script>
const player = new OpenVideoPlayer()
document.getElementById("container").appendChild(player.container)
// Video from https://gist.github.com/jsturgis/3b19447b304616f18657
const videoInfo = new OpenVideoPlayerVideoInfo({
title: "Big Buck Bunny",
subtitle: "By Blender Foundation",
description: "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
sources: [
{
url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
type: "video/mp4"
}
],
thumbnail: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
author: {
name: "The Blender Foundation",
profileUrl: "https://example.com/"
}
})
player.play(videoInfo, {playImmediately: false, showVideoInfo: true})
const player2 = new OpenVideoPlayer()
document.getElementById("container").appendChild(player2.container)
player2.play(videoInfo, {playImmediately: false, showVideoInfo: false})
</script>
<style>
html, body {
width: max-content;
height: max-content;
}
#container {
width: 30cm;
aspect-ratio: 16/9;
}
</style>
</body>
</html>