html 播放器 TcPlayer

2022-05-07 03:31:47 阅读：212 来源： 互联网

<script src="./js/TcPlayer-2.4.5.js" charset="utf-8"></script>


<section v-if="videoShow" style="position: fixed;top: 0;bottom: 0;margin: auto 0;z-index: 999999;width: 100%;height: 100%;background: rgba(0,0,0,.6)">
      <img src="images/close.png" @click="videoShow = false" style="position: absolute;right: 20px;top: 20px;z-index: 100;width: 40px;">

      <div id="id_TCP_video" style="width:100%; height:100%;"></div>

  </section>

new TcPlayer('id_TCP_video', {
    "mp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
    "live": false,
    "autoplay" : true,
    "pausePosterEnabled" : false,
    //"poster" : {"style":"cover", "src":"/assets/res/images/videostop.jpg"}
    //default：居中并且以图片的实际分辨率进行显示;stretch：拉伸铺满播放器区域，图片可能会变形;cover：优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内
    "poster":{"style":"cover", "src": ''},
    "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
    "height" : '100%', //视频的显示高度，请尽量使用视频分辨率高度
    "wording": {
        2032: "Failed to request video, please check network",
        2048: "Failed to request m3u8 file, it may be a network error or cross-domain problem",
        13: "The live broadcast has ended, please come back later.",
    }
})

TcPlayer文档 TCPlayerLite（旧）

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

标签：播放器,视频,分辨率,cover,TcPlayer,mp4,html
来源： https://www.cnblogs.com/anans/p/16240920.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html 播放器 TcPlayer