html 播放器 TcPlayer

<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