腾讯视频云点播　　传送门

　　项目在腾讯云点播服务之视频的上传（上）【附源码】的基础上添加了两个html页面

　　此视频  播放传送门

(播放视频GIF会超过10M。。。)

package com.Gary.videodemo.controller;

import java.util.Random;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.servlet.ModelAndView;

import com.Gary.videodemo.utils.Signature;

@RestController

public class IndexController {

    @RequestMapping("/start2")

    public ModelAndView start2() {

        return new ModelAndView("/start2.html");

    }

    @RequestMapping("/start")

    public ModelAndView start() {

        return new ModelAndView("/start.html");

    }

    @RequestMapping("/plus")

    public ModelAndView plus()

    {

        return new ModelAndView("/video-plus.html");

    }

    @RequestMapping("/")

    public ModelAndView index(){

        return new ModelAndView("/video.html");

    }

    @RequestMapping("/sign")

    @ResponseBody

    public String getSign()

    {

        //得到Sign

            Signature sign = new Signature();

            //个人API密钥中的Secret Id

            sign.setSecretId("AKIDkNsDQWZOYYVSHu49kDh9Uh1FSoxxxxxx");

            //个人API密钥中的Secret Key

            sign.setSecretKey("XDn1a3NWzN0Tp4vH3zpSp5fEX2xxxxxx");

            sign.setCurrentTime(System.currentTimeMillis() / 1000);

            sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));

            sign.setSignValidDuration(3600 * 24 * 2);

            String signature = null;

            try {

                signature = sign.getUploadSignature();

                System.out.println("signature : " + signature);

            } catch (Exception e) {

                System.out.print("获取签名失败");

                e.printStackTrace();

            }

            return signature;

    }

}

IndexController.java

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 引入播放器的css -->

<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet"></link>

<!-- 引入播放器的js -->

<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>

<!-- 现代的浏览器要通过h5播放hls，需要引入新的js -->

</head>

<body>

<h1>Gary播放界面 1</h1>

    <video id="start" preload="auto" width="1920" height="1080" ></video>

    <script type="text/javascript">

        //告诉浏览器要播放什么视频 start为播放地方的id

        var player = TCPlayer("start",

        {

            fileID: "5285890785018500000", // 请传入需要播放的视频filID 必须

            appID: "1257730000", // 请传入点播账号的appID 必须

            autoplay: false //是否自动播放

        });

    </script>

</body>

</html>

start.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>Gary播放界面 2</h1>

    <!-- 直接指向用户的html页面  要给用户id，视频id -->

<iframe src="//1257702179.vod2.myqcloud.com/vod-player/1257730000/5285890785018500000/tcplayer/console/vod-player.html?autoplay=false&width=1920&height=1080" width="100%" height="1080" frameborder="0" scrolling="no"></iframe>

</body>

</html>

start2.html

　　腾讯云视频的管理

　　

显示腾讯云视频显示方法有两种

　　（一）通过TCPlayer实现视频的播放

　　（二）iframe视频播放

　　分别在腾讯云视频管理下的Web视频播放器代码生成下有案例

　　第一种方法通过TCPlayer实现视频的播放

　　需要引入css与js文件，把视频播放当成一个相应的模板去使用

<!-- 引入播放器的css -->

<link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet"></link>

<!-- 引入播放器的js -->

<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
    <script type="text/javascript">

        //告诉浏览器要播放什么视频 start为播放地方的id

        var player = TCPlayer("start",

        {

            fileID: "5285890785018500000", // 请传入需要播放的视频filID 必须

            appID: "1257730000", // 请传入点播账号的appID 必须

            autoplay: false //是否自动播放

        });

    </script>

　　不引入css文件会出现视频控制页面，如下

　　第二种方法使用iframe视频播放

<body>

<h1>Gary播放界面 2</h1>

    <!-- 直接指向用户的html页面  要给用户id，视频id -->

<iframe src="//1257702179.vod2.myqcloud.com/vod-player/1257730000/5285890785018500000/tcplayer/console/vod-player.html?autoplay=false&width=1920&height=1080" width="100%" height="1080" frameborder="0" scrolling="no"></iframe>

</body>

　　腾讯云为了避免用户写太多配置，我们可以直接通过src打开视频目录连接进行视频播放

　　只需修改用户id，视频id即可　　其余路径不能错　　此视频连接传送门

//1257702179.vod2.myqcloud.com/vod-player/1257730000/5285890785018500000/tcplayer/console/vod-player.html

　　vod-player.html？后边设置视频的属性　　长度、宽度、是否自动播放

vod-player.html?autoplay=false&width=1920&height=1080

JavaWeb-SpringBoot_（下）腾讯云点播服务之视频的显示-demo的更多相关文章

  1. JavaWeb-SpringBoot_（上）腾讯云点播服务之视频的上传-demo

    使用Gradle编译项目 传送门 腾讯视频云点播 传送门 项目已托管到Github上 传送门 腾讯云点播服务之视频的显示(下) 传送门 个人腾讯云控制台中的视频管理 IndexController.j ...

  2. 腾讯云点播视频存储(Web端视频上传)

    官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

  3. asp.net core使用serilog将日志推送到腾讯云日志服务

    为什么是serilog? Serilog是 .NET 中最著名的结构化日志类库. 基于日志事件log events,而不是日志消息log message. 你可以将日志事件格式化为控制台的可读文本或者 ...

  4. 腾讯云容器服务 TKE 推出新一代零损耗容器网络

    随着容器技术的发展成熟,越来越多的组件迁移到容器,在技术迁移过程中,数据库,游戏,AI 这些组件对容器网络性能(时延,吞吐,稳定性)提出了更高的要求.为了得到更优的时延和吞吐表现,各大云厂商都在致力于 ...

  5. 在腾讯云容器服务 TKE 中利用 HPA 实现业务的弹性伸缩

    在 TKE 上利用 HPA 实现业务的弹性伸缩 概述 Kubernetes Pod 水平自动扩缩(Horizontal Pod Autoscaler,以下简称 HPA)可以基于 CPU 利用率.内存利 ...

  6. 腾讯云容器服务 TKE 拿下新加坡 MTCS 最高级别安全认证

    近日,腾讯云容器服务 TKE 荣获新加坡 MTCS 最高级安全认证,标志着腾讯云 TKE 在为用户提供可靠.易部署.灵活扩展等基础服务上,已经全面满足了新加坡监管机构以及多个行业客户对服务安全的要求. ...

  7. 腾讯云OCR服务二次开发

    本文记录了对腾讯云OCR服务二次开发的代码和开发过程中遇到的问题.

  8. 腾讯云游戏服务平台CMatrix品牌全新升级为GameMatrix

    近日,隶属腾讯互娱公共研发运营体系(下文称CROS)下的云游戏服务平台CMatrix宣布进行品牌升级,启用全新商标Tencent GameMatrix,将原先代表云服务的“C”替换成游戏的英文单词“G ...

  9. ***腾讯云直播（含微信小程序直播）研究资料汇总-原创

    这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把一些技术资料和文档归集如下: 1.微信小程序移动直播入门导读 https://cloud.tencent.com/doc ...

随机推荐

  1. 15条SQLite3语句

    15条SQLite3语句   转自:http://www.thegeekstuff.com/2012/09/sqlite-command-examples/ SQLite3 is very light ...

  2. [Android] Installation failed due to: ''pm install-create -r -t -S 4590498' returns error 'UNSUPPORTED''

    小米特有问题 关闭开发者选项的启用MIUI优化 不得不说, 这是真的坑...

  3. http协议：http请求、http响应、间隔时间跳转页面、禁用浏览器缓存

    转自:https://blog.csdn.net/u013372487/article/details/46991623 http协议 1. http协议是建立在  tcp/ip协议基础上. 2. 我 ...

  4. python+opencv+sift环境配置教程

    最近在做对应点估计homography,需要用到opencv,c++的接口不如python的接口来的方便 但是在安装python接口的opencv的时候,遇到了各种问题,主要是函数找不到的问题 比如在 ...

  5. 数据集：Introduction to Econometrics by Stock&Watson

    James H. Stock and Mark W. Watson, Introduction to Econometrics: data sets 詹姆斯·H·斯托克 马克·W·沃森. 计量经济学. ...

  6. vue项目默认IE以最高级别打开

    只需要在index.html加入 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  7. 解决：Nginx访问静态页面出现中文乱码

    需要修改nginx的server的配置内容,增加一行:charset utf-8; 详情如下: upstream you.domainName.com { server 127.0.0.1:8080; ...

  8. Windows 系统自动登录配置

    1. open regedit 2. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon 3.在打开的项右 ...

  9. go语言json转map

    package util import ( "encoding/json" "fmt" ) // json转map函数,通用 func JSONToMap(st ...

  10. mysql 中的 tinyint 字段

    只能存储  -128 ~ 127  之间的数字