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

腾讯视频开放平台:http://v.qq.com/open/index.html
文档:http://v.qq.com/open/doc/tvpa...

方法一:引入iframe

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

方法二:引入js

1、引入js:

<script src="//imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2_jq.js"></script>

2、html部分:

<div id="videoId" class="video-wrapper"></div>

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

<script type="text/javascript">(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:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf',//精简皮肤onwrite: function() {console.log("播放器显示完毕");},onpause:function(){console.log('暂停了')},onallended:function(){console.log('播放完了')}});player.addParam("wmode","transparent");})();
</script>

还有一种需求是 播放按钮 要求用其它样式的,我们可以把原本的播放按钮隐藏掉,然后把在视频封面图上加上视频按钮,如下图:
图片描述
于是有了3.2
3.2、js部分 :(去掉了播放按钮)

<script type="text/javascript">(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:'http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.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");})();
</script>

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

网页引入腾讯视频小记相关推荐

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

    前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下 方法一:引入iframe 在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可 腾讯视频加载方案, 网页嵌入腾讯视频方 ...

  2. Vue/微信小程序 -- 引入腾讯视频

    做项目时有个需求,就是播放腾讯视频,直接给的播放链接,比如:https://v.qq.com/x/page/b0136et5ztz.html (该链接是网上找的).最初的做法,就是用vue开发h5页面 ...

  3. 微信小程序引入腾讯视频插件

    首先在微信公众平台引入插件 在设置--第三方设置里面 申请使用插件 appid:wxa75efa648b60994b 根据文档写代码 文档地址:https://mp.weixin.qq.com/wxo ...

  4. 微信小程序(或uniapp)引入腾讯视频插件播放视频

    1.申请插件 注意:个人开发者无法使用 登录微信公众平台,在你的小程序后台的设置-第三方服务-插件管理,搜索插件并点击添加. 添加成功之后,点击详情,查看该插件的具体信息. 拿到该插件的appid以及 ...

  5. 腾讯视频云签到(2022-5-29更新)

    # -*- coding: utf8 -*- import requests import requests.utils import time import json import requests ...

  6. Python爬虫实战,requests模块,Python实现抓取腾讯视频弹幕评论

    前言 利用Python实现抓取腾讯视频弹幕,废话不多说. 让我们愉快地开始吧~ 开发工具 Python版本: 3.6.4 相关模块: requests模块: pandas模块 以及一些Python自带 ...

  7. 腾讯视频MP4转换最新方法2019-7

    腾讯视频可下载MP4 一般的腾讯视频客户端缓存都是qlv文件,必须用腾讯客户端播放.旧版腾讯视频缓存可以找到tdl文件并利用cmd转换为MP4,但最新版为hs.这个特制版取消了腾讯视频强制更新功能,还 ...

  8. 在直播APP系统源码中基于腾讯视频云SDK制作简易版直播回放播放器

    在直播App系统中,当主播结束之后,我们需要使用播放器观看直播的一些回放片段,在观看回放的过程中,我们会使用到开始,暂停,控制播放位置,进度监听,全屏等功能,然而腾讯点播并没有提供这些简单的控制功能, ...

  9. 腾讯视频网页下载_腾讯视频怎么下载视频

    本文给大家整理了腾讯视频网页下载_腾讯视频怎么下载视频方面的内容.腾讯视频独播剧质量还是可以的,比较给力的是腾讯视频大量买入了老剧的版权,不乏一些比较经典的港剧,还把这些老剧修复了.腾讯视频播放器是一 ...

最新文章

  1. Redis初学:5(String类型的基本操作)
  2. 根据值 加密后的值 算出key_Bugku:加密 rsa
  3. How do I get the lowest value of all the non zero value pixels?
  4. sklearn自学指南(part46)--新颖性和离群值检测方法概述
  5. 美团点评金融平台Web前端技术体系
  6. YAML_01 YAML语法和playbook写法
  7. 大学生计算机考试题题库,大学生统考计算机一级考试试题题库(供参考)
  8. mysql如果空显示_mysql按照自己定义的值显示如果为空的就显示0
  9. 用python做计算器(超级版)
  10. dh算法 理论依据_dh算法(dh算法原理)
  11. mac上的android模拟器下载安装,Mac电脑上安装安卓模拟器,Mac如何安装Android模拟器...
  12. 判定覆盖与条件覆盖的区别
  13. rippled 02 rippled api 协议使用
  14. 测试人员怎样定位bug原因
  15. gps android 卫星位置,Android手机GPS获取卫星数量不正确问题
  16. hr员工数据分析(实战)
  17. 班农注定落得如此下场
  18. 强网杯2019(高明的黑客强网先锋上单)
  19. arcgis flex api 由于沙箱安全的原因 无法显示地图 的解决办法
  20. 氨基官能化的铜金属有机骨架(Cu-MOF-NH2)|石墨相碳化氮纳米片/ZiF67片层结构复合材料|mof定制材料

热门文章

  1. 区块链如何赋能传统会员积分体系,产生溢出效应
  2. Glide(二)Glide的with,load,into
  3. 小米十年,做不好售后
  4. 生产型外协管理系统:功能解析篇
  5. 雪亮工程建设标准_为什么建设雪亮工程以及建设雪亮工程的几个要点
  6. 20、实现短信验证码的登录注册功能
  7. 51 Nod 1563——坐标轴上的最大团
  8. 2012年广州市户口搭户指南——可以搭到朋友家里?
  9. PONG - 100行代码写一个弹球游戏
  10. 转:解决“连接被重置”