騰訊HTML播放器模板

時間 2020-01-10

標籤騰訊 html 播放模板欄目騰訊简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
        }
    </style>
</head>
<body>
<div id="video-container" style="margin: 0px auto;">

</div>
<!--[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.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;
        }
        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'),
            autoplay = (getParams('autoplay') == 'true' ? true : false);
        /**
         * 視頻類型播放優先級
         * mobile ：m3u8>mp4
         * PC ：RTMP>flv>m3u8>mp4
         */
        var options = {
            rtmp: rtmp,
            flv: flv ,
            m3u8: m3u8 ,
            mp4 : mp4 || 'rtmp://192.168.30.212/mypull/test', //
            coverpic: coverpic ,
            autoplay: autoplay ? true : false,
            live: live,
            width : width || '480',
            height : height || '320',
            wording: {
                2032: '請求視頻失敗，請檢查網絡',
                2048: '請求m3u8文件失敗，多是網絡錯誤或者跨域問題'
            },
            listener: function (msg) {
                //console.log(msg.type);
            }
        };
        var player = new TcPlayer('video-container', options);
        console.log(player);
    })();
</script>
</body>
</html><!--[if !IE]>|xGv00|4ceb2c54152fcb3fd413ec6673baecd1<![endif]-->