當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/10 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了腾讯云播放器 Demo与调用方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Web 端播放器支持 PC 端和移動端的瀏覽器視頻播放，豐富靈活的接口可幫助用戶快速與自有 Web 應用集成。針對超級播放器的基礎播放和點播播放兩種播放模式，騰訊云分別提供了其對應的 Web 端視頻播放器，您可根據自身需求進行體驗。

?騰訊云播放器設置

<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline> </video>  <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"><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>   <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与调用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： NCoreCoder.Aop详解
下一篇：【图像处理】H.264开源解码器评测