网页引入腾讯视频小记
前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下
腾讯视频开放平台:http://v.qq.com/open/index.html
文档:http://v.qq.com/open/doc/tvpa...
方法一:引入iframe
在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可
方法二:引入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,我们也可以直接改播放按钮的样式。
网页引入腾讯视频小记相关推荐
- 在html中怎么插入腾讯视频,腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式...
前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下 方法一:引入iframe 在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可 腾讯视频加载方案, 网页嵌入腾讯视频方 ...
- Vue/微信小程序 -- 引入腾讯视频
做项目时有个需求,就是播放腾讯视频,直接给的播放链接,比如:https://v.qq.com/x/page/b0136et5ztz.html (该链接是网上找的).最初的做法,就是用vue开发h5页面 ...
- 微信小程序引入腾讯视频插件
首先在微信公众平台引入插件 在设置--第三方设置里面 申请使用插件 appid:wxa75efa648b60994b 根据文档写代码 文档地址:https://mp.weixin.qq.com/wxo ...
- 微信小程序(或uniapp)引入腾讯视频插件播放视频
1.申请插件 注意:个人开发者无法使用 登录微信公众平台,在你的小程序后台的设置-第三方服务-插件管理,搜索插件并点击添加. 添加成功之后,点击详情,查看该插件的具体信息. 拿到该插件的appid以及 ...
- 腾讯视频云签到(2022-5-29更新)
# -*- coding: utf8 -*- import requests import requests.utils import time import json import requests ...
- Python爬虫实战,requests模块,Python实现抓取腾讯视频弹幕评论
前言 利用Python实现抓取腾讯视频弹幕,废话不多说. 让我们愉快地开始吧~ 开发工具 Python版本: 3.6.4 相关模块: requests模块: pandas模块 以及一些Python自带 ...
- 腾讯视频MP4转换最新方法2019-7
腾讯视频可下载MP4 一般的腾讯视频客户端缓存都是qlv文件,必须用腾讯客户端播放.旧版腾讯视频缓存可以找到tdl文件并利用cmd转换为MP4,但最新版为hs.这个特制版取消了腾讯视频强制更新功能,还 ...
- 在直播APP系统源码中基于腾讯视频云SDK制作简易版直播回放播放器
在直播App系统中,当主播结束之后,我们需要使用播放器观看直播的一些回放片段,在观看回放的过程中,我们会使用到开始,暂停,控制播放位置,进度监听,全屏等功能,然而腾讯点播并没有提供这些简单的控制功能, ...
- 腾讯视频网页下载_腾讯视频怎么下载视频
本文给大家整理了腾讯视频网页下载_腾讯视频怎么下载视频方面的内容.腾讯视频独播剧质量还是可以的,比较给力的是腾讯视频大量买入了老剧的版权,不乏一些比较经典的港剧,还把这些老剧修复了.腾讯视频播放器是一 ...
最新文章
- Redis初学:5(String类型的基本操作)
- 根据值 加密后的值 算出key_Bugku:加密 rsa
- How do I get the lowest value of all the non zero value pixels?
- sklearn自学指南(part46)--新颖性和离群值检测方法概述
- 美团点评金融平台Web前端技术体系
- YAML_01 YAML语法和playbook写法
- 大学生计算机考试题题库,大学生统考计算机一级考试试题题库(供参考)
- mysql如果空显示_mysql按照自己定义的值显示如果为空的就显示0
- 用python做计算器(超级版)
- dh算法 理论依据_dh算法(dh算法原理)
- mac上的android模拟器下载安装,Mac电脑上安装安卓模拟器,Mac如何安装Android模拟器...
- 判定覆盖与条件覆盖的区别
- rippled 02 rippled api 协议使用
- 测试人员怎样定位bug原因
- gps android 卫星位置,Android手机GPS获取卫星数量不正确问题
- hr员工数据分析(实战)
- 班农注定落得如此下场
- 强网杯2019(高明的黑客强网先锋上单)
- arcgis flex api 由于沙箱安全的原因 无法显示地图 的解决办法
- 氨基官能化的铜金属有机骨架(Cu-MOF-NH2)|石墨相碳化氮纳米片/ZiF67片层结构复合材料|mof定制材料