腾讯云 Web 超级播放器开发实战

置顶 于 2024-05-28 12:31:08 发布
阅读量4k 收藏 132
点赞数 170
分类专栏： UI专栏 文章标签： 腾讯云 前端 云计算 javascript ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/michaelline/article/details/139253919
版权

目录

关于超级播放器

范例运行环境

开发前准备

设计与实现

初始化播放器

播放器重要属性设置

播放器实用事件

 一些兼容性判断

浏览器支持

关于华为手机

 实现代码

小结

关于超级播放器

腾讯云 Web 超级播放器 TCPlayer 可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。

在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要解决了以下问题：

1、增加、集成了播放快进组件

2、更改了一些样式

3、增强了一些旧版手机的兼容性

范例运行环境

操作系统： Windows Server 2019 DataCenter

.net版本： .netFramework4.0 或以上

开发工具：VS2019  C# 

浏览器需要支持 H5 技术。

开发前准备

(1）我们需要引入腾讯云 Web 超级播放器的 JS 库，以下是我改造后的资源，可点击如下链接进行下载：

https://download.csdn.net/download/michaelline/89367455

(2）前端布局，下载我的资源后，假设放在当前应用目录下，首先我们需要引入样式单，如下代码：

<link rel="stylesheet" href="tcplayer2021.css" />

 其次，引入核心库，如下代码：

 <script type="text/javascript" src="hls.min.0.12.4.js"> </script>
 <script type="text/javascript" src="tcplayer.v4.min.js"> </script>

（3）需要引入 Jquery，以下是一组基于Jquery的自定义开发的扩展应用库，请下载我的资源：

https://download.csdn.net/download/michaelline/88615565

进行引用，本库用于调用服务器静态方法等功能使用。

设计与实现

初始化播放器

播放器需要引入与结合 H5 的 Video 控件，假设有如下引用：

<div id="coplayer" style="box-shadow:2px 0px 35px  #000;  -webkit-box-shadow:2px 0px 35px  #000; background-color:rgb(69,69,69); position:fixed;top:40px;left:0px;width:80%;height:100px;  margin: 0px auto;">

  <video id="realcoplayer" autoplay="autoplay" controls="controls" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"  runat="server" ></video>
  <a id="b_rate" onclick="rate(this);" style=" float:right; line-height:25px; margin-right:10px; color:#fff;display:none;">1x</a> 

</div>

其中

1、coplayer 为外围容器层，控制一些样式和位置输出  

2、realcoplayer 为 h5 video 控件，用于结合腾讯 web 超级播放器使用

其关键属性说明如下：

序号属性与设置说明
1autoplay="autoplay" 设置是否自动播放，在移动端或IOS系统可能无法实现
2controls="controls"是否显示控制工具栏，这里设置为需要显示
3webkit-playsinline playsinline

兼容性属性：webkit-playsinline使ios 10中设置可以让视频在小窗内播放，即不全屏播放。  playsinline 可使用IOS/微信浏览器支持小窗内播放

4x5-playsinlineH5 移动是否禁用全屏，这里为允许，为空则不允许
5x-webkit-airplay="allow"使此视频支持ios的AirPlay（隔空播放）功能，隔空播放能将各种 Apple 设备中的音乐流传输到家中的多个扬声器上,并让这些扬声器中播放的旋律始终保持合拍， 让音乐荡漾在每个房间。

3、b_rate 为用于改造及引入超级播放器的快进组件，配合其使用。

客户端播放器的初始化代码如下：

var player = new TCPlayer('realcoplayer', { 
fileID: 111, 
appID: '125407', 
playbackRates: [0.5, 1, 1.25, 1.5, 2],
        autoplay: false,
        live: false,
        x5_player: true,
        volume: 0.5,
        flash: true,
        x5_player: true,
        systemFullscreen: false,
        playsinline: true,
        x5_orientation: 0,
        x5_type: 'h5',
        allowFullScreen: false,
        width:_w,
        height:_h,

});

播放器重要属性设置

在实际使用中，为保证良好的可用性和兼容性，还需要设置如下属性，说明见下表：

序号参数类型说明
1fileID string云点播平台可播放视频文件的 fileID
2appIDstring云点播平台申请的 appID
3playbackRatesfloat[]快进倍速设置，如此数组 [0.5, 1, 1.25, 1.5, 2]
4autoplaybool是否设置为自动播放，false 为不自动
5livebool是否直播功能，默认为 false
6x5_playerbool设为 true 。是否启用 TBS 的播放 flv 或 hls 。启用时播放器将在 TBS 模式下(例如 Android 的微信、QQ 浏览器），将 flv 或 hls 播放地址直接赋给 <video> 播放。
7volumefloat默认音量，0-1，0.5为居中
8flashbool一个兼容的重要属性，设为 true
9systemFullscreenbool开启后(true)，在不支持 Fullscreen API 的浏览器环境下，尝试使用浏览器提供的 webkitEnterFullScreen 方法进行全屏，如果支持，将进入系统全屏，控件为系统控件
10playsinlinebool兼容性属性，设为 true
11x5_orientationint

通过 video 属性 “x5-video-orientation” 声明 TBS 播放器支持的方向，可选值：

0：landscape 横屏

1：portraint 竖屏

2：landscape &verbar; portrait 跟随手机自动旋转。

(备注：该属性为 TBS 内核实验性属性，非 TBS 内核不支持)

12x5_typestring通过 video 属性 “x5-video-player-type” 声明启用同层 H5 播放器，支持的值：h5-page (该属性为 TBS 内核实验性属性，非 TBS 内核不支持)
13allowFullScreenbool兼容性写法，是否允许全屏播放
14widthint设置播放器宽度，单位为像素。
15heightint设置播放器高度，单位为像素。

播放器实用事件

通过跟踪超级播放器提供的监听事件，实现我们的开发需求，其关键事件说明如下：

序号事件说明
1timeupdate

播放时间更新事件，可记录播放时间，其结构体如下:

player.on('timeupdate',function(){  }) 

2play

开始播放时事件，其结构体如下：

player.on('play',function(){ })

3fullscreenchange

切换全屏状态事件，其结构体如下：

player.on('fullscreenchange',function(){    })

4seeked

拖动播放进度结束事件，其结构体如下：

player.on('seeked',function(){    })

5pause

播放暂停时事件，其结构体如下：

player.on('pause',function(){    })

6ended

播放结束时事件，其结构体如下：

player.on('ended',function(){    })

7canplay

播放能力执行成功事件，其结构体如下：

player.on('canplay',function(){    })

8loadeddata

音视频数据加载完毕时事件，其结构体如下：

player.on('loadeddata',function(){    })

9ratechange

改变快进倍速完成时事件，其结构体如下：

player.on('ratechange',function(){    })

类实现代码如下：

public class QR_LIMIT_STR_SCENE
{
            public string AccessToken { get; set; }
            public string ticket { get; set; }
            public string url { get; set; }
            public string ResultJson = "";
            public QR_LIMIT_STR_SCENE()
            {
            }
            public string getUrl(string scene_str)
            {
                string PostJson = "{\"action_name\": \"QR_LIMIT_STR_SCENE\", \"action_info\": {\"scene\": {\"scene_str\": \"" + scene_str + "\"}}}";
                String action = "https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=" + AccessToken;
                WebService ws = new WebService();
                string rs = ws.GetResponseResult(action, Encoding.UTF8, "POST", PostJson);
                Newtonsoft.Json.Linq.JObject jsonObj = Newtonsoft.Json.Linq.JObject.Parse(rs);
                ticket = jsonObj["ticket"] != null ? jsonObj["ticket"].ToString() : "";
                url = jsonObj["url"] != null ? jsonObj["url"].ToString() : "";
                ResultJson = rs;
                return "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + ticket;

            }
}

 一些兼容性判断

浏览器支持

编写浏览器是否支持终端H5播放的判断，实现代码如下：

        function checkVideo() {
            if (!!document.createElement('video').canPlayType) {
                var vidTest = document.createElement("video");
                oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
                if (!oggTest) {
                    h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
                    if (!h264Test) {
                        return false;
                    }
                    else {
                        if (h264Test == "probably") {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                }
                else {
                    if (oggTest == "probably") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            }
            else {
                return false;
            }
            return true;
        }
        if (!checkVideo()) {
            alert('您的浏览器不支持Video播放，请使用支持H5技术的浏览器！');
        }
关于华为手机

在某些华为手机我们发现倍速快进组件样式显示异常，因此引入 JS 函数，对机型增加了一些判断 ，代码如下：

    function judgeBrand(sUserAgent) {
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";

       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }

对华为手机的判断处理代码如下：

if(judgeBrand(navigator.userAgent.toLowerCase())=='huawei'){
            $("#b_rate").html="1x";
            $("#b_rate").css("display","");
        }else{
            $("#b_rate").css("display","none");
        }

 实现代码

相对完整的实现代码（包括样式引入、前端控件和JS控制）如下：

<link rel="stylesheet" href="tcplayer2021.css" />
    <asp:TextBox ID="x_roomid" checkSchema="" runat="server" style="display:none"></asp:TextBox>
 <script type="text/javascript" src="hls.min.0.12.4.js"> </script>
 <script type="text/javascript" src="tcplayer.v4.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery.js" ></script>

<div id="h5panel" runat="server" >
<asp:TextBox ID="x_fileid" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="current" Text="0" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="duration" Text="0" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="mname" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_mp4url" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_CoverUrl" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_playMark" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_lasttime" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="confirmflag" Text="0" runat="server" style="display:none;" ></asp:TextBox>
<asp:TextBox ID="playMarkflag" Text="0" runat="server" style="display:none;" ></asp:TextBox>
<asp:TextBox ID="x_videocount" Text="0" style="display:none;" runat="server"></asp:TextBox>

<div id="coplayer" style="box-shadow:2px 0px 35px  #000;  -webkit-box-shadow:2px 0px 35px  #000; background-color:rgb(69,69,69); position:fixed;top:40px;left:0px;width:80%;height:100px;  margin: 0px auto;">
                <video id="realcoplayer" autoplay="autoplay" controls="controls" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"  runat="server" ></video>
                <a id="b_rate" onclick="rate(this);" style=" float:right; line-height:25px; margin-right:10px; color:#fff;display:none;">1x</a> 
</div>

<script language="javascript">
       var windowheight=$(window).height();
        form = document.forms[0];

        function checkVideo() {
            if (!!document.createElement('video').canPlayType) {
                var vidTest = document.createElement("video");
                oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
                if (!oggTest) {
                    h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
                    if (!h264Test) {
                        return false;
                    }
                    else {
                        if (h264Test == "probably") {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                }
                else {
                    if (oggTest == "probably") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            }
            else {
                return false;
            }
            return true;
        }
        if (!checkVideo()) {
            alert('您的浏览器不支持Video播放，请使用支持H5技术的浏览器！');
        }    

    var timer=null;
    var curtime=0;
    function stimer(){ 
        timer=window.setInterval("setpmark()",1000);
    }
    function etimer(){
        window.clearInterval(timer);
    }

        function secondToDate(result) {
        var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
        var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
        var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
        if(h=="00"){
        return result = m + ":" + s;
        }else{
        return result = h + ":" + m + ":" + s;
        }
    }
        var _w = $(document).width();
        if(_w>=1200){
            _w=640;
        }
        _h=_w/16*9;
        
    function resizeAll(){
        var _w = $(document).width();
        if(_w>=1200){
            _w=640;
        }
        _h=_w/16*9;
        if(player.isFullscreen()==true){
        }
        document.getElementById('coplayer').style.left=($(document).width()-_w)/2+'px';
        document.getElementById('coplayer').style.width=_w+'px';
        document.getElementById('coplayer').style.height=_h+'px';

    function aiplaymark(curtime){
        player.currentTime(curtime);
        player.play();
    }

    var debug=document.getElementById('debug');
    var curtime=0;
    var seeked=false;

    var player = new TCPlayer('realcoplayer', { fileID: document.getElementById('x_fileid').value, appID: '12540',
 playbackRates: [0.5, 1, 1.25, 1.5, 2],
        autoplay: false,
        live: false,
        x5_player: true,
        volume: 0.5,
        flash: true,
        x5_player: true,
        systemFullscreen: false,
        playsinline: true,
        x5_orientation: 0,
        x5_type: 'h5',
        allowFullScreen: false,
        width:_w,
        height:_h,

});

    player.on('timeupdate',function(){ 
        document.getElementById("current").value=player.currentTime();
    })
    player.on('play',function(){
        stimer();
        updcountinfo('play',0);
    })
    player.on('fullscreenchange',function(){
    })

    player.on('seeked',function(){
    })
    player.on('pause',function(){
        etimer();
    })
    player.on('ended',function(){
        etimer();
    })
    player.on('canplay',function(){
    })
    player.on('loadeddata',function(){
        player.poster(document.getElementById('x_CoverUrl').value);
        if(judgeBrand(navigator.userAgent.toLowerCase())=='huawei'){
            $("#b_rate").html="1x";
            $("#b_rate").css("display","");
        }else{
            $("#b_rate").css("display","none");
        }
          this.currentTime(document.getElementById("current").value);
    })
    
    player.on('ratechange',function(){
        $('#b_rate').html($('.vjs-playback-rate-value').html());
    })
    function rate(o) {         
        document.querySelectorAll('.vjs-playback-rate')[1].click();
    }
    
    function judgeBrand(sUserAgent) {
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";

       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }
    function updcountinfo(ctype,counts){
         if(ctype=='play'){
             if(document.getElementById('x_videocount').value=='0'){
                document.getElementById('x_videocount').value='1';
             }else{
                return;
             }
         }
         callServerFunction("", "updateCountInfo","{cid:'"+$("#x_cid").val()+"',ctype:'"+ctype+"',counts:'"+counts+"'}", sscount);
    }

    function setpmark(){
         curtime++;
         callServerFunction("", "updatePersonLearnInfo","{cid:'"+$("#x_cid").val()+"',uid:'"+$("#x_uid").val()+"',pid:'"+$("#x_pid").val()+"',playmark:'"+$('#current').val()+"',steptime:'1'}", ss);
    }
  
var sTime;
     
</script>

小结

（1）关于更多的超级播放器 SDK 开发介绍，请参照如下链接：

https://cloud.tencent.com/document/product/881/30818

（2）实现代码中事件代码仅供参考，对于服务器静态方法实现需要根据我们实际的应用需求进行开发。

（3）实现代码中的前端控件，只为演示实例使用，可根据需要改造符合自己的开发规范。

感谢您的阅读，希望本文能够对您有所帮助。

初九之潜龙勿用
关注
  • 170
    点赞
  • 踩
  • 132
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 142
    评论
专栏目录
云点播web端上传_腾讯云点播视频存储(Web端视频上传)
weixin_39822923的博客
12-20 462
前言所谓视频上传，是指开发者或其用户将视频文件上传到点播的视频存储中，以便进行视频处理、分发等。一、简介腾讯云点播支持如下几种视频上传方式：控制台上传：在点播控制台上进行操作，将本地视频上传到云点播，适用于直接管理少量视频的场景，具有方便快捷、无技术门槛的优点；服务端上传：开发者将存储在其后台服务器中的视频上传到云点播，适用于自动化、系统化的运营场景；客户端上传：终端用户将客户端本地视频上传到云点...
TcPlayer-2.3.2.js
03-11
tcplayer视频播放器js
tcplayer播放实时视频流
weixin_46352558的博客
12-23 2404
代码实例， urlAddress是父组件传来的视频流地址，也有可用的网上找的视频流地址为注释的source。也可以全局引入 在index.html，全局引入文件我是放在public下面的。样式的话需要在main.js引用下图的tcplayer.min.css。js依赖文件是在官网下载的。
集成腾讯云TcPlayer并实现web端视频播放
qq_52157198的博客
04-18 1441
官方文档：https://cloud.tencent.com/document/product/881/77877。TcPlayer初始化在遇到异步操作时可能会出现问题，比如获取不到组件之类的。这个时候可以考虑采用定时器进行操作。不过该实例是静态的，可以稍作修改，将fileId、appId等作为参数传入，动态获取签名。是播放器派发的签名，需要先得到签名才可以播放。官方的产品文档提供了签名获取的实例代码，稍作。上面是播放器初始化的代码，其中，
vue3中TCplayer应用
jiangliuhuan123的博客
08-30 1152
环境win10:vite+vue3+elementUI 2 使用 license 问题 licenseUrl: ‘https://license.vod2.myqcloud.com/license/v2/1310752424_1/v_cube.license’’ 代码里面的是我自己免费申请的.时长14天. 这个东西是8.16更新的时候加的免费申请web License 链接 下面是sdk的更新日志: https://cloud.tencent.com/document/product/881/20204
【Vue2 + TCPlayer】实现视频云点播功能
weixin_47375144的博客
12-20 4213
使用：腾讯云，本文基于VUE 需求：利用云点播制作视频 文档：https://cloud.tencent.com/document/product/266/58772 demo: https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/build/index.html 步骤： 1.在页面中引入文件 (1) 先下载 js 文件，将文件放入到该项目中合适的位置      然后将该 js 文件引入到 .vue
腾讯云 Web 超级播放器 JS 引用库
最新发布
05-28
腾讯云 Web 超级播放器 TCPlayer 可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。 在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要...
swift-腾讯云超级播放器
08-15
**Swift-腾讯云超级播放器** 是一个专为iOS平台设计的高级播放器，它构建在腾讯云移动直播服务之上，提供了丰富的视频播放功能。这个播放器的核心优势在于其快速集成，灵活性和高度的定制性，允许开发者轻松实现视频...
SuperPlayer_Android:腾讯云超级播放器（Android）
05-12
├─ SDK │ ├─ LiteAVSDK_Player_x.y.zzzz.aar // 如果您下载的是 Player 专用 zip 包，解压后将出现此文件夹，其中 x.y.zzzz 表示 SDK 版本号SDK 分类和下载腾讯云 Player SDK 基于 LiteAV
腾讯云-人脸核身java开发Demo
07-13
1. 开箱即用，导入到idea中即可 2. 修改FaceConfig.java中APP_ID和SECRET为自己申请的腾讯人脸核身ID和秘钥即可 3. 可以先看readme.md有对项目结构介绍 4. 参考博客：http://t.csdn.cn/hfjUd
云计算应用开发 1+X 腾讯云
06-30
通过这个1+X腾讯云认证，学员不仅能够获得理论知识，还将通过实践操作提升自己的实战能力，为未来在云计算领域的工作或创业打下坚实基础。随着云计算技术的不断发展，具备这些技能的专业人才将在职场上更具竞争力。
h5集成腾讯云播放器tcplayer遇到的坑
gw6601的博客
06-12 1076
需要注意的是，腾讯云播放器使用了video标签，在全屏状态下,会新建图层位于最高级别，需要获取图层标签，动态添加按钮和标题。1、腾讯云播放器没有提供Controls的显示/隐藏监听，需要自己添加监听事件。3、根据控制栏联动播放器顶部标题和返回按钮。2、根据控制栏动态显示倍速提示框。
tcplayer在vue3中的应用
qq_68262470的博客
03-08 811
腾讯的视频播放sdk在前端和后端的应用，以及各个版本出现的问题
远程WEB控制MP3播放器设计（基于mini2440）
知秋一叶
12-13 2889
网上有很多 基于mini2440的MP3播放器设计的资料，多是按键控制，这里博主做了些轻微改动，利用远程WEB来控制MP3播放，具体怎么实现，下面会给出，大家先看看效果： WEB界面： 后台运行： 因为不是什么课程设计报告，博主就不阐述的那么详细，这个设计主要有三部分组成： 1、WEB控制端(就是浏览器)； 2、WEB服务器端（将mini2440开发板作为服务器，其中移植
vue中使用TcPlayer，自动播放视频，以及下一个视频
热门推荐
The road to success is lonely
05-23 1万+
前提是已经知道怎么使用TcPlayer。 一、自动播放视频。 方案：在activated中使用定时器（setTimeout()） 例： setTimeout(function(){ $this.playBtn(0); },0); 二、自动切换下一个 方案：看new TcPlayer()返回的都有哪些参数，在这些参数里找需要的东西。 this.tenObj = new ...
JS TcPlayer 自动播放视频列表中处于屏幕中央的视频
qq_43734389的博客
07-22 891
使用JS和TcPlayer，设计自动播放视频列表中处于屏幕中央视频的解决方案。
uniapp 做点播，用的是腾讯的tcplayer（ 原理基本上和 vue 一样，区别在于 uniapp 不能直接引用 video 标签，得动态创建 ）网页版
nelly521的博客
09-25 804
uniapp 做点播，用的是腾讯的tcplayer（ 原理基本上和 vue 一样，区别在于 uniapp 不能直接引用 video 标签，得动态创建 ）console.log("js资源加载成功了");console.log("js资源加载失败了");// 创建script标签，引入外部文件。// sdk引入有顺序。--播放器脚本文件-->
腾讯云点播web视频播放
qq_43012432的博客
09-27 1746
完整的web 接入 腾讯云点播 视频播放功能
腾讯云部署web应用
04-11
腾讯云提供了多种方式来部署Web应用，以下是其中几种常用的方式： 1. 云服务器（CVM）：您可以在腾讯云上创建一台云服务器，然后将您的Web应用程序部署到该服务器上。您可以选择适合您需求的操作系统和配置，然后通过SSH远程登录服务器进行配置和管理。 2. 云函数（SCF）：云函数是一种无服务器计算服务，您可以将您的Web应用程序打包成函数，并通过事件触发来执行。云函数具有自动扩缩容、按需计费等特点，适合处理短时任务和低并发的Web应用。 3. 容器服务（TKE）：容器服务是一种基于Kubernetes的容器管理服务，您可以将您的Web应用程序打包成容器镜像，并通过容器服务进行部署和管理。容器服务提供了高可用、弹性伸缩等特性，适合处理高并发和复杂的Web应用。 4. 无服务器应用引擎（SLS）：无服务器应用引擎是一种全托管的Serverless应用引擎，您只需要上传您的代码，无需关心服务器和基础设施的管理。无服务器应用引擎支持多种编程语言和框架，适合快速部署和迭代开发Web应用。 以上是腾讯云部署Web应用的几种常用方式，您可以根据您的需求和技术栈选择适合的方式进行部署。
评论 142
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初九之潜龙勿用

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值