腾讯云播放器 Demo与调用方法
Web 端播放器支持 PC 端和移动端的浏览器视频播放，丰富灵活的接口可帮助用户快速与自有 Web 应用集成。针对超级播放器的基础播放和点播播放两种播放模式，腾讯云分别提供了其对应的 Web 端视频播放器，您可根据自身需求进行体验。腾讯云播放器 Demo与调用方法<!DOCTYPE html><html lang="en"><head><meta char
·
Web 端播放器支持 PC 端和移动端的浏览器视频播放，丰富灵活的接口可帮助用户快速与自有 Web 应用集成。针对超级播放器的基础播放和点播播放两种播放模式，腾讯云分别提供了其对应的 Web 端视频播放器，您可根据自身需求进行体验。
腾讯云播放器设置
<!-- 设置播放器容器 -->
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
</video>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->
<script>
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
appID: '1400329073', // 请传入点播账号的appID 必须
//其他参数请在开发文档中查看
plugins: {
ContinuePlay: {
// auto: true // 是否在播放时自动续播
},
ProgressMarker: true,
ContextMenu: {
statistic: true,
levelSwitch: {
open: true, // 打开切换提示
// switchingText: '开始', // 开始切换时文案
// switchedText: '成功', // 切换成功时文案
// switchErrorText: '失败', // 切换失败时文案
}
}
}
});
</script>腾讯云播放器 Demo与调用方法
<!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>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<!--<meta http-equiv="content-security-policy" content="block-all-mixed-content">-->
<style>
body {
margin: 0;
padding: 0;
}
.vcp-error-tips {
color: #fff;
}
a{
color: #fff;
}
#input-box {
margin: 10px;
}
.input-item {
margin-bottom: 10px;
}
.input-item .label {
display: inline-block;
width: 60px;
}
.input-item input[type='text'] {
width: 280px;
height: 30px;
}
#play-btn {
width: 100px;
height: 40px;
background-color: #1e90ff;
display: inline-block;
text-align: center;
line-height: 40px;
color: white;
margin-left: 20px;
}
#play-btn:hover {
background-color: #51c8e7;
}
#qrcode {
display: inline-block;
}
</style>
</head>
<body>
<div id="video-container" style="margin: 0px auto;"></div>
<div id="input-box">
<div class="input-item">
<div class="label">rtmp:</div>
<input type="text" placeholder="rtmp地址" id="rtmp">
</div>
<div class="input-item">
<div class="label">flv:</div>
<input type="text" placeholder="flv地址" id="flv">
</div>
<div class="input-item">
<div class="label">m3u8:</div>
<input type="text" placeholder="m3u8地址" id="m3u8">
</div>
<div class="input-item">
<div class="label">mp4:</div>
<input type="text" placeholder="mp4地址" id="mp4">
</div>
<div class="input-item">
<div class="label">width:</div>
<input type="text" placeholder="视频宽度" id="width">
</div>
<div class="input-item">
<div class="label">height:</div>
<input type="text" placeholder="视频高度" id="height">
</div>
<div class="input-item">
<div class="label" style="width: 80px">启用flash:</div>
<input name="flash" type="radio" value="1">是
<input name="flash" type="radio" value="0" checked>否
</div>
<div class="input-item">
<div class="label" style="width: 80px">自动播放:</div>
<input name="autoplay" type="radio" value="1">是
<input name="autoplay" type="radio" value="0" checked>否
</div>
<div class="input-item">
<div class="label" style="width: 80px">x5_player:</div>
<input name="x5_player" type="radio" value="1">是
<input name="x5_player" type="radio" value="0" checked>否
</div>
<div class="input-item">
<div class="label" style="width: 80px">h5_flv:</div>
<input name="h5_flv" type="radio" value="1">是
<input name="h5_flv" type="radio" value="0" checked>否
<div id="play-btn">生成链接</div>
</div>
<div id="qrcode" style="margin-top:15px;"></div>
</div>
<!--Polyfill-->
<!--[if lt IE 9]>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js"></script>
<![endif]-->
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/demo/qrcode/qrcode.min.js"></script>
<script>
(function () {
function getParams(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
function getPathParams() {
var path = location.pathname.split('/');
if (path[1] == 'vod-player') {
return {
'path': location.origin + path.slice(0, 4).join('/'),
'appid': path[2],
'fileid': path[3]
}
} else {
return null;
}
}
var rtmp = getParams('rtmp'),
flv = getParams('flv'),
m3u8 = getParams('m3u8'),
mp4 = getParams('mp4'),
live = (getParams('live') == 'true' ? true : false),
coverpic = getParams('coverpic'),
width = getParams('width'),
height = getParams('height'),
volume = getParams('volume'),
flash = (getParams('flash') == 'true' ? true : false),
x5_player = (getParams('x5_player') == 'false' ? false : true),
h5_flv = (getParams('h5_flv') == 'true' ? true : false),
autoplay = (getParams('autoplay') == 'true' ? true : false),
flashUrl = (function () {
var params = getPathParams();
if (params) {
return params.path + '/player/release/QCPlayer.swf';
}
return '//imgcache.qq.com/open/qcloud/video/player/release/QCPlayer.swf'
})(),
log = getParams('log');
/**
* 视频类型播放优先级
* mobile ：m3u8>mp4
* PC ：RTMP>flv>m3u8>mp4
*/
var options = {
rtmp: rtmp,
flv: flv ,
m3u8: m3u8 ,
mp4: mp4 || '//1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4',
autoplay: autoplay,
live: live,
width: width || '480',
height: height || '320',
volume: volume || 0.5,
flash: flash,
flashUrl: flashUrl,
x5_player: x5_player,
h5_flv: h5_flv,
wording: {
2032: '请求视频失败，请检查网络',
2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
},
listener: function (msg) {
}
};
window.tcplayer = new TcPlayer('video-container', options);
var playBtn = document.getElementById('play-btn');
var rtmpInput = document.getElementById('rtmp');
var flvInput = document.getElementById('flv');
var m3u8Input = document.getElementById('m3u8');
var mp4Input = document.getElementById('mp4');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
if (rtmp) rtmpInput.value = rtmp;
if (flv) flvInput.value = flv;
if (m3u8) m3u8Input.value = m3u8;
if (mp4) mp4Input.value = mp4;
if (width) widthInput.value = width;
if (height) heightInput.value = height;
if (flash) document.querySelectorAll('[name="flash"]')[0].checked = true;
if (autoplay) document.querySelectorAll('[name="autoplay"]')[0].checked = true;
if (x5_player) document.querySelectorAll('[name="x5_player"]')[0].checked = true;
if (h5_flv) document.querySelectorAll('[name="h5_flv"]')[0].checked = true;
var paramInput = {
'rtmp': rtmpInput,
'flv': flvInput,
'm3u8': m3u8Input,
'mp4': mp4Input,
'width': widthInput,
'height': heightInput
};
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 150,
height : 150
});
// 二维码解析过程存在异常，长度在192--220之间报H级别错误时会解析失败，直接延长href
let href = location.href;
if (href.length >= 192 && href.length <= 220) {
href += '&qrcodebug=';
for (var i = 0; i <= 17; i++) href += 'q';
}
qrcode.makeCode(href);
playBtn.onclick = function () {
var url = location.href.split('?')[0] + '?';
Object.keys(paramInput).forEach(function (key, index) {
var val = encodeURIComponent(paramInput[key].value);
if (val) url += (index ? '&' : '') + key + '=' + val;
});
url += '&flash=' + (document.querySelectorAll('[name="flash"]')[0].checked ? 'true' : 'false');
url += '&autoplay=' + (document.querySelectorAll('[name="autoplay"]')[0].checked ? 'true' : 'false');
url += '&x5_player=' + (document.querySelectorAll('[name="x5_player"]')[0].checked ? 'true' : 'false');
url += '&h5_flv=' + (document.querySelectorAll('[name="h5_flv"]')[0].checked ? 'true' : 'false');
location.href = url;
};
})();
</script>
</body>
</html>
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)