# 腾讯 video 引用
源码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<title>使用JSAPI</title>
</head>
<body>
<div id="container"></div>
<p style="padding:10px">
<button type="button" class="btn btn-primary" onclick="player.play()">播放</button>
<button type="button" class="btn btn-success" onclick="player.pause()">暂停</button>
</p>
</body>
<!-- 使用相对协议，同时支持http和https -->
<script src='//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js'></script>
<script>
var player = new Txplayer({
containerId: 'container',
vid: 'l0539vqs140',
width: '100%',
height: screen.availHeight / 3
});
player.on('ready', () => {
console.log('player ready');
});
player.on('volumeChange', (volume) => {
console.log('player volumechange:', volume);
});
player.on('playStateChange', (state) => {
console.log('player playStateChange:', state);
});
</script>
</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
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
效果展示
# bilibili视频
源码展示
<div class='video-box' style="position: relative; width: 100%;height: 400px;">
<iframe src="//player.bilibili.com/player.html?aid=27107052&cid=46709183&page=1&as_wide=1&high_quality=1&danmaku=0"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"> </iframe>
</div>
1
2
3
4
5
2
3
4
5
效果展示
# bilibili视频 移动端适配
源码展示
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
src="https://player.bilibili.com/player.html?bvid=BV1px411b7rd&cid=22385522&page=1&as_wide=1&high_quality=1&danmaku=0"
frameborder="no" scrolling="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
1
2
3
4
5
2
3
4
5
效果展示
# Aliplayer视频
源码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Functions</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
</head>
<body>
<div id="player-con"></div>
<script>
var player = new Aliplayer({
id: "player-con",
source: "//player.alicdn.com/video/editor.mp4",
width: "100%",
height: "500px",
cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
/* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
autoplay: false,
preload: false,
isLive: false
}, function (player) {
console.log("The player is created");
});
</script>
</body>
</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
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
效果展示
# H5原生video
源码展示
<video x5-video-player-fullscreen="true" preload="auto" x5-video-player-type="h5" x5-video-orientation="portraint"
width="100%" controls height="400" src="//player.alicdn.com/video/editor.mp4">
</video>
1
2
3
2
3
效果展示