133 lines
4.2 KiB
HTML
133 lines
4.2 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
|
||
<title>腾讯云视频点播示例</title>
|
||
|
||
|
||
<link href="https://tcplayer.vcube.tencent.com/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet" />
|
||
<script src="https://tcplayer.vcube.tencent.com/tcplayer-plugins/tcplayer.v4.8.0.min.js"></script>
|
||
|
||
<script src="https://webrtc-demo.myqcloud.com/pull-sdk/js/vconsole.min.js"></script>
|
||
|
||
<style>
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.tcplayer {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media screen and (max-width: 640px) {
|
||
#player-container-id {
|
||
width: 100%;
|
||
height: 270px;
|
||
}
|
||
}
|
||
|
||
/* 设置logo在高分屏的显示样式 */
|
||
@media only screen and (min-device-pixel-ratio: 2),
|
||
only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
.tcp-logo-img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="overflow-y: hidden">
|
||
<!-- 设置播放器容器 -->
|
||
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline crossorigin="anonymous">
|
||
</video>
|
||
|
||
<button id="enterVR">enterVR</button>
|
||
<button id="exitVR">exitVR</button>
|
||
<button id="enableSensor">enableSensor</button>
|
||
<button id="gyroscopeVR">gyroscope:VR</button>
|
||
<button id="gyroscopeNone">gyroscope:none</button>
|
||
<button id="lookAt">lookAt</button>
|
||
|
||
|
||
|
||
<!--
|
||
注意事项：
|
||
* 播放器容器必须为 video 标签
|
||
* player-container-id 为播放器容器的ID，可自行设置
|
||
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
|
||
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
|
||
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
|
||
-->
|
||
|
||
<script>
|
||
var vConsole = new VConsole();
|
||
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
|
||
reportable: false,
|
||
|
||
// 12. vr
|
||
// appID: '1500005692',
|
||
// fileID: '243791580518143986',
|
||
// psign: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNTY5MiwiZmlsZUlkIjoiMjQzNzkxNTgwNTE4MTQzOTg2IiwiY3VycmVudFRpbWVTdGFtcCI6MTY4MjMzNzM0NywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaXRpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTY5Mi52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.g6lUJDbNfLmq8vAiC5dn1GlLTw5HT7dUDxSOCDsKALs',
|
||
|
||
plugins: {
|
||
VR: {
|
||
// isEnableController: true,
|
||
// isEnableZoom: true,
|
||
// yaw: 0,
|
||
// pitch: 0,
|
||
// fov: 65,
|
||
// yawRange: [-180, 180],
|
||
// pitchRange: [-90, 90],
|
||
// fovRange: [30, 110],
|
||
},
|
||
}
|
||
});
|
||
|
||
player.ready(function() {
|
||
|
||
});
|
||
|
||
player.on('error', (err) => {
|
||
console.log('err', err);
|
||
});
|
||
|
||
// mp4 vr
|
||
// player.src('https://1305308197.vod2.myqcloud.com/a3557591vodger1305308197/f7270750243791579800235226/f0.mp4');
|
||
player.src('https://test2-kelive-vod.ke.com/6c9782ddvodcq1500000489/42eae20e1397757897057520142/playlist.f9.mp4')
|
||
|
||
document.getElementById('enterVR').addEventListener('click', function () {
|
||
player.plugins['VR'].enterVR();
|
||
});
|
||
|
||
document.getElementById('exitVR').addEventListener('click', function () {
|
||
player.plugins['VR'].exitVR();
|
||
});
|
||
|
||
document.getElementById('enableSensor').addEventListener('click', function () {
|
||
player.plugins['VR'].enableSensor();
|
||
});
|
||
|
||
document.getElementById('gyroscopeVR').addEventListener('click', function () {
|
||
player.plugins['VR'].setGyroMode('VR');
|
||
});
|
||
|
||
document.getElementById('gyroscopeNone').addEventListener('click', function () {
|
||
player.plugins['VR'].setGyroMode('none');
|
||
});
|
||
|
||
document.getElementById('lookAt').addEventListener('click', function() {
|
||
player.plugins['VR'].lookAt({yaw: 30}, 1000);
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |