Skip to content

Commit ea69751

Browse files
virgoonevirgoone
committed
[feat]add liveos demo
1 parent 204bfe1 commit ea69751

File tree

2 files changed

+214
-1
lines changed

2 files changed

+214
-1
lines changed

‎docs/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
</p>
9191
</div>
9292

93-
<div class='js-player'>
93+
<div class='js-player' id="liveos-root">
9494
<video webkit-playsinline playsinline x-webkit-airplay controls src='http://player.cdn.muertv.com/renjian.flv' preload='none'>
9595
</video>
9696
<!--poster="http://player.cdn.muertv.com/tianfuzhen.jpg.hebe" -->
@@ -132,8 +132,10 @@
132132
</div>
133133

134134
<!-- vPlyr core script -->
135+
<script src="https://sdkcdn.videojj.com/liveOS/asserts/dat.gui/dat.gui.js"></script>
135136
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
136137
<script src="https://unpkg.com/[email protected]/dist/vplyr.min.js"></script>
138+
<script src="https://sdkcdn.videojj.com/liveos-sdk/test/liveos.js"></script>
137139
<!--<script src="../dist/vplyr.js"></script>-->
138140

139141
<script>

‎docs/liveos/index.html

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!doctype html>
2+
<html lang="zh-cn">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Liveos 演示</title>
7+
<meta name="description" content="Video++ liveOS演示">
8+
<meta name="keywords" content="Video++,视频播放器,h5,Video,B站,FLVjs,前端,Node,Blog,博客,技术,前端开发,工程师,Front">
9+
<meta name="author" content="virgoone">
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
12+
13+
<meta http-equiv="Cache-Control" content="no-transform">
14+
<meta http-equiv="Cache-Control" content="no-siteapp">
15+
<link rel="canonical" href="http://vplyr.marryto.me">
16+
<!-- Styles -->
17+
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
18+
<link rel="stylesheet" href="https://cdn.bootcss.com/bulma/0.4.1/css/bulma.min.css">
19+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vplyr.min.css">
20+
<!--<link rel="stylesheet" href="../dist/vplyr.css">-->
21+
<link rel="stylesheet" href="/demo.css">
22+
<link rel="shortcut icon" type="image/png" href="/favico.png">
23+
<script>
24+
(function (i, s, o, g, r, a, m) {
25+
i['GoogleAnalyticsObject'] = r;
26+
i[r] = i[r] || function () {
27+
(i[r].q = i[r].q || []).push(arguments)
28+
}, i[r].l = 1 * new Date();
29+
a = s.createElement(o),
30+
m = s.getElementsByTagName(o)[0];
31+
a.async = 1;
32+
a.src = g;
33+
m.parentNode.insertBefore(a, m)
34+
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
35+
36+
ga('create', 'UA-90536291-3', 'auto');
37+
ga('send', 'pageview');
38+
39+
</script>
40+
</head>
41+
42+
<body>
43+
<section class="container">
44+
<nav class="nav">
45+
<div class="nav-left">
46+
<a class="nav-item" href='/'>
47+
<span class='logo'>VPlyr</span>
48+
</a>
49+
</div>
50+
51+
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
52+
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
53+
<span class="nav-toggle">
54+
<span></span>
55+
<span></span>
56+
<span></span>
57+
</span>
58+
59+
<!-- This "nav-menu" is hidden on mobile -->
60+
<!-- Add the modifier "is-active" to display it on mobile -->
61+
<div class="nav-right nav-menu">
62+
<a class="nav-item" href="https://github.com/virgoone/vplyr/#vplyr" title="播放器文档">
63+
Document
64+
</a>
65+
<a class="nav-item" href="https://blog.marryto.me" title="我的博客">
66+
Blog
67+
</a>
68+
69+
<div class="nav-item">
70+
<div class="field is-grouped">
71+
<p class="control">
72+
<a class="button is-danger" href="https://github.com/virgoone/vplyr" target="_blank" title="Github">
73+
<span class="icon">
74+
<i class="fa fa-github"></i>
75+
</span>
76+
<span>Github</span>
77+
</a>
78+
</p>
79+
</div>
80+
</div>
81+
</div>
82+
</nav>
83+
<main class="content">
84+
<div class="field is-grouped">
85+
<p class="control is-expanded">
86+
<input value="http://player.cdn.muertv.com/yinyuetai.mp4" class="input" type="text" placeholder="输入一个视频地址" id='input-url'>
87+
</p>
88+
<p class="control">
89+
<a class="button is-info" id='control-play'>播放</a>
90+
</p>
91+
</div>
92+
93+
<div class='js-player' id="liveos-root">
94+
<video webkit-playsinline playsinline x-webkit-airplay controls src='http://player.cdn.muertv.com/yinyuetai.mp4' loop preload='none'>
95+
</video>
96+
<!--poster="http://player.cdn.muertv.com/tianfuzhen.jpg.hebe" -->
97+
</div>
98+
</main>
99+
</section>
100+
<footer class="footer">
101+
<div class="container">
102+
<div class="content has-text-centered">
103+
<p>
104+
<strong>VPlyr</strong> by <a href="https://blog.marryto.me">Koya</a>.
105+
<br/> The source code is licensed
106+
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
107+
</p>
108+
</div>
109+
</div>
110+
</footer>
111+
<div class="modal" id="modal">
112+
<div class="modal-background"></div>
113+
<div class="modal-content">
114+
<div class="message is-danger">
115+
<div class="message-header">
116+
VPlyr Error
117+
</div>
118+
<div class="message-body">
119+
120+
</div>
121+
</div>
122+
</div>
123+
<button class="modal-close"></button>
124+
</div>
125+
126+
<!-- vPlyr core script -->
127+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
128+
<script src="https://unpkg.com/[email protected]/dist/vplyr.min.js"></script>
129+
<script src="https://sdkcdn.videojj.com/liveos-sdk/test/liveos.js"></script>
130+
<!--<script src="../dist/vplyr.js"></script>-->
131+
132+
<script>
133+
$(function () {
134+
function gaEventTrigger(eventCategory, eventAction, eventLabel, eventValue) {
135+
ga && ga('send', 'event', eventCategory, eventAction, eventLabel, eventValue);
136+
}
137+
if (window.vPlayer) {
138+
const v = new vPlayer(document.querySelector('video'), {
139+
debug: false
140+
});
141+
if (/\.flv/.test(v.src) && !v.support.flvSupport) {
142+
$('.message-body').html(`${v.brower.name}不支持MSE转码<br/>请更换视频地址`)
143+
$('.modal').addClass('is-active');
144+
}
145+
v.on('error', function () {
146+
$('.message-body').html(`${v.brower.name}不支持此视频地址<br/>请更换`)
147+
$('.modal').addClass('is-active');
148+
gaEventTrigger('Videos', 'VPlyr-Play-Error', 'Videos Event', 1)
149+
})
150+
v.on('play', function () {
151+
gaEventTrigger('Videos', 'VPlyr-Play', 'Videos Event', 1)
152+
})
153+
window.v = v;
154+
// v.src = 'http://player.cdn.muertv.com/renjian.flv'
155+
console.log(v);
156+
157+
$('#control-play').on('click', function () {
158+
const url = $('#input-url').val();
159+
if (!url) {
160+
$('.message-body').html('请输入视频地址')
161+
$('.modal').addClass('is-active');
162+
return;
163+
}
164+
if (/\.flv/.test(url) && !v.support.flvSupport) {
165+
$('.message-body').html(`${v.brower.name}不支持MSE转码<br/>请更换视频地址`)
166+
$('.modal').addClass('is-active');
167+
return;
168+
}
169+
v.src = url;
170+
v.play();
171+
gaEventTrigger('Videos', 'VPlyr-URL-Play', 'Videos Event', 1)
172+
})
173+
$('.modal-background, .modal-close').click(function () {
174+
$('html').removeClass('is-clipped');
175+
$(this).parent().removeClass('is-active');
176+
});
177+
178+
$('.modal-card-head .delete, .modal-card-foot .button').click(function () {
179+
$('html').removeClass('is-clipped');
180+
$('#modal-ter').removeClass('is-active');
181+
});
182+
183+
$(document).on('keyup', function (e) {
184+
if (e.keyCode == 27) {
185+
$('html').removeClass('is-clipped');
186+
$('.modal').removeClass('is-active');
187+
}
188+
});
189+
let LiveOSInstance;
190+
const platformId = '556c38e7ec69d5bf655a0fb2';
191+
const platformUserId = '81';
192+
193+
if (window.__LiveOS__) {
194+
if (LiveOSInstance) {
195+
LiveOSInstance.destroy();
196+
}
197+
LiveOSInstance = new __LiveOS__('#liveos-root', {
198+
platformId,
199+
platformUserId,
200+
player: v.media,
201+
});
202+
window.__INSTANCE__ = LiveOSInstance;
203+
}
204+
205+
}
206+
})
207+
208+
</script>
209+
</body>
210+
211+
</html>

0 commit comments

Comments
 (0)