腾讯云播放器 Demo与调用方法

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级别错误时会解析失败，直接延长hreflet 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>

腾讯云播放器 Demo与调用方法相关推荐

uniapp插件-腾讯云播放器sdk插件-腾讯云高清播放器-多码率支持-截图-播放控制-变速播放
目前仅做了安卓版本,如果需求量可以的话我们会制作IOS版本的. 使用方法: 腾讯云播放器腾讯云目前是免费的,后期不知道,需要注册请访问腾讯云官网,优雅草伙伴注册链接: 点击访问腾讯云官网关联优雅草科 ...
实践：基于腾讯云播放器SDK，带您体验播放多场景下的 COS 视频文件
一. 实践步骤 1. 准备您的腾讯云COS 视频文件链接,您需要: 1.1 创建一个存储桶: 1.2 上传对象: 1.3 在对象信息详情里复制对象地址: 注意: 目前腾讯云有COS特惠活动,新人1元 ...
腾讯迁移至阿里云播放器
目前APP中视频模块使用了腾讯及阿里两套播放器,造成维护困难.包体增大.恰逢开谈项目下线决定进行播放器业务迁移. 首先需要熟悉一下各个播放器的使用方法以及业务中的应用场景.涉及的模块包括直播拉流.直播 ...
如何搭建一个自己的音乐播放器-使用腾讯云轻量应用服务器搭建YesPlayMusic网易云播放器
项目简介本文使用的是YesPlayMusic项目,这是一款高颜值的第三方网易云播放器,它完全可以作为网易云官方应用的替代品.而且还拥有一些网易云官方应用没有的功能,比如可以自动签到,支持PWA可以直 ...
引用腾讯视频 php代码,调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码发布时间:2018-05-18 00:10, 浏览次数:685 , 标签: APi 转自:https://blog.csdn.net/boyit0/article/det ...
直播播放器API（播放器调用方法、参数、接口和事件）
直播播放器API(播放器调用方法.参数.接口和事件): 播放器调用方法 <div class="player"></div> <script src= ...
快播3在线安装程序变身快播下载器 vb 源代码以及调用方法
快播3在线安装程序变身快播下载器 vb 源代码以及调用方法 2010年09月30日软件的界面我已经做出来了,界面简单美观,双击软件的空白界面可以打开qvod资源网站,直接在那个网站批量复制批量粘贴到 ...
第二代居民身份证阅读器GTICR-100（国腾）接口类调用方法
最近做了一个项目,客户需求要用第二代居民身份证阅读器GTICR-100(国腾)来读取用户的信息.我做的这个项目是C/S开发的(C# windowsForms),用到的一些参考资料以及这个国腾硬件驱动 ...
调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码 <!doctype html> <html><head><meta charset="utf-8">& ...
腾讯企业号 IOS 系统调用方法返回”wxLocalResource:/“问题
使用苹果手机和安卓手机进行上传,微信API 会返回值 serverID 然后把上传到微信临时服务器的图片转移到公司服务器,调用方法临时的值 string tagUrl = "http ...

腾讯云播放器 Demo与调用方法

腾讯云播放器 Demo与调用方法相关推荐

最新文章

热门文章