在html中怎么插入腾讯视频,腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式...

前言：更多详细内容可以参考腾讯开发平台的文档，我在这里简单备忘一下

方法一：引入iframe

在视频播放界面的左下方，鼠标移动到分享，复制通用代码放在页面上即可

腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式

将视频在微信公众平台中的调用代码提取出来，如下所示：

打开需要添加的腾讯视频网址，例如：.html

将上述代码中的vid=后面的内容替换成上述网址中标红的部分，然后将上述网址重新复制出来：

方法二：引入js

1、引入js:

2、html部分：

3.1、js部分(保留播放按钮)

(function(){

var videoSet={

vid:'w0378xrv3dh',

poster:'//****/poster.jpg',//手机端poster图

width:$(".video-wrapper").width,

height:$(".video-wrapper").height

}

var video = new tvp.VideoInfo();

video.setVid(videoSet.vid);

var player = new tvp.Player();

player.create({

video: video,

modId: "videoId",

width:videoSet.width,

height:videoSet.height,

pic:videoSet.poster,

isHtml5ShowPosterOnEnd:true,

isiPhoneShowPosterOnPause:true,

vodFlashSkin:'.swf',//精简皮肤

onwrite: function() {

console.log("播放器显示完毕");

},

onpause:function(){

console.log('暂停了')

},

onallended:function(){

console.log('播放完了')

}

});

player.addParam("wmode","transparent");

})();

还有一种需求是 播放按钮 要求用其它样式的，我们可以把原本的播放按钮隐藏掉，然后把在视频封面图上加上视频按钮，如下图：

腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式

于是有了3.2

3.2、js部分 ：(去掉了播放按钮)

(function(){

var videoSet={

vid:'w0378xrv3dh',

poster:'//***/poster.jpg',//手机端poster图

width:$(".video-wrapper").width,

height:$(".video-wrapper").height

}

var video = new tvp.VideoInfo();

video.setVid(videoSet.vid);

var player = new tvp.Player();

player.create({

video: video,

modId: "videoId",

width:videoSet.width,

height:videoSet.height,

pic:videoSet.poster,

isHtml5ShowPosterOnEnd:true,

isiPhoneShowPosterOnPause:true,

vodFlashSkin:'.swf',//精简皮肤

onwrite: function() {

console.log("播放器显示完毕");

$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});

$(".tvp_button_play").css({'border':'none'});

},

onplaying:function(){

console.log('开始播放');

},

onpause:function(){

console.log('暂停了')

$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});

$(".tvp_button_play").css({'border':'none'});

$(".tvp_overlay_replay .tvp_button_replay").css({'background':'transparent'});

$(".tvp_overlay_play, .tvp_overlay_play_try, .tvp_overlay_replay").css({'background':'transparent'});

},

onallended:function(){

console.log('播放完了')

$('.tvp_overlay_play').css({'background-color': 'rgba(255, 255, 255, 0)'});

$(".tvp_button_play").css({'border':'none'});

$(".tvp_overlay_replay .tvp_text").css({'font-size':0});

}

});

player.addParam("wmode","transparent");

})();

对于3.2，我们也可以直接改播放按钮的样式。