页面中插入腾讯视频

最新推荐文章于 2022-06-13 10:41:43 发布

转载最新推荐文章于 2022-06-13 10:41:43 发布 · 537 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/antyhouse/p/9198644.html

文章标签：

#javascript #ViewUI

本文介绍如何使用腾讯视频API在网页中嵌入并播放腾讯视频。通过引入特定的JavaScript文件，设置播放器尺寸、视频ID等参数，实现点击图片按钮播放指定视频的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

腾讯视频API

http://v.qq.com/open/doc/tvpapi2.0.pdf

用script标签引入腾讯视频

https://segmentfault.com/a/1190000011848932

腾讯视频例子

http://m.v.qq.com/tvp/

接下来需求:

点击一张图上的按钮,播放腾讯视频

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<title>默认封面图</title>
</head>
<body>
<script src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" type="text/javascript" ></script>
<script src="http://v.qq.com/iframe/tvp.config.js?v=20150918" type="text/javascript"></script>

<div class="video-wraper">
    <div id="mod_player"></div>
</div>


<script>

    var width = 300,
      height = 200,
      height = height > window.innerHeight ? window.innerHeight : height;
    
    window.tvpSetting = {
      width: width,
      height: height,
      vid: 't0640j2bju0',
      vid2: 'o0171fmfwmf',
      vid_limit: 'z0016v1ocio',
      vid_short: 'f162169s71x',
      lid: '123002500'
    };

    var video = new tvp.VideoInfo();
    video.setVid(tvpSetting.vid);
    var player = new tvp.Player();
    player.create({
        width  : tvpSetting.width,
        height : tvpSetting.height,
        pic: './tt.png',
        video  : video,
        playerType: 'html5',
        isiPhoneShowPosterOnPause : !tvp.$.browser.WeChat,
        modId  : 'mod_player'
    });


</script>
</body>
</html>