首页 > 其他分享 >腾讯云视频点播示例

腾讯云视频点播示例

时间:2023-02-18 10:01:25浏览次数:48  
标签:播放器 container playsinline 示例 player 腾讯 视频点播 id


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>腾讯云视频点播示例</title>
<!-- 引入播放器 css 文件 -->
<link href="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
<!-- 如需在IE8、9浏览器中初始化播放器,浏览器需支持Flash并在页面中引入 -->
<!--[if lt IE 9]>
<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
<![endif]-->
<!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls,需要引入 hls.js -->
<script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.12.4.js"></script>
<!-- 引入播放器 js 文件 -->
<script src="http://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js"></script>
<!-- 示例 CSS 样式可自行删除 -->
<style>
html,body{
margin: 0;
padding: 0;
}
.tcplayer {
margin: 0 auto;
}
@media screen and (max-width: 640px) {
#player-container-id {
width: 100%;
height: 270px;
}
}
/* 设置logo在高分屏的显示样式 */
@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
.tcp-logo-img {
width: 50%;
}
}
</style>
</head>
<body>
<!-- 设置播放器容器 -->
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
</video>
<!--
注意事项:
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID,可自行设置
* 播放器区域的尺寸请按需设置,建议通过 css 进行设置,通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放,此处仅作示例,请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->
<script>
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID,必须与html中一致
fileID: '5285890794819451356', // 请传入需要播放的视频filID 必须
appID: 'xxxx' ,// 请传入点播账号的appID 必须
psign:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6MTI1MTU5MzM3MywiZmlsZUlkIjoiNTI4NTg5MDc5NDgxOTQ1MTM1Nix...uw'
//其他参数请在开发文档中查看
});
</script>
</body>
</html>

标签:播放器,container,playsinline,示例,player,腾讯,视频点播,id
From: https://blog.51cto.com/u_15967457/6065074

相关文章

  • Microsoft office 2013官方正版免费完整版腾讯微云下载分享
    Office2013与Office365究竟有什么区别呢?其实Office2013、更老的Office2007、Office2010等版本是安装在微软正版操作系统上的免费套餐,而Office365也包括了office系列所......
  • ESP32: Blink 示例
    目录Blink示例创建项目程序入口打开idf.py前端设置目标设备配置GPIO硬件连线所用材料连线编译工程烧录与监视输出结果Blink示例新做一个LED灯闪烁的示例程序并烧录到......
  • ChatGPT:用delphi写一个键盘鼠标的全局钩子dll示例
    libraryGlobalHooks;usesWindows;{$R*.res}constWH_KEYBOARD_LL=13;WH_MOUSE_LL=14;typeTKeyboardHook=recordHook:HHOOK;Callba......
  • 实践:基于腾讯云播放器SDK,带您体验播放多场景下的 COS 视频文件
    一.实践步骤1.准备您的腾讯云COS视频文件链接,您需要:1.1创建一个存储桶;1.2上传对象;1.3在对象信息详情里复制对象地址;注意:    目前腾讯云......
  • WinForm滚动条美化-Panel示例(一)
    关于滚动条美化网上翻阅相关资料大概分两种,一是覆盖原有滚动条;二是纯靠绘制+钩子实现;两种实现方式都依赖系统Api来实现;话不多说先上效果图该效果主要是隐藏滚动条;消息拦......
  • 实践:带您用多种姿势将存储在腾讯云COS 上的视频播放
    导语随着5G时代的到来,短视频/直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储(COS)作为可容纳海量数据且支持HTTP/HTTPS协议访问的分布式存......
  • antd table 自定义折叠展开图标(示例)
    expandable={{expandedRowKeys,onExpandedRowsChange:(expandedRows)=>{updateState((draft)=......
  • 附录E示例-Tin_3
    示例概述意图这个场景有一个很小的三角网(只有1.5K个三角形),中间没有空隙。 内容为地理参考:-地图投影MGA9456区的水平坐标为东距和北距,-垂直坐标为AHD,-水平和垂直基准......
  • 【OpenCV】-边缘检测汇总示例
    汇总之前:这一节还有一个scharr滤波器(也是算子)没有介绍,先介绍一下。。。1计算图像差分:Scharr()函数使用Scharr滤波器运算符计算x或y方向的图像差分,包含的参数与Sobel算子基......
  • 【OpenCV】图片尺寸放缩示例程序
    这次示例程序分别演示了用resize、pyrUp、pyrDown来让源图像进行放大缩小操作#include<opencv2/opencv.hpp>#include<opencv2/imgproc/imgproc.hpp>#include<opencv2/highgu......