腾讯视频云点播　　传送门

　　项目在腾讯云点播服务之视频的上传（上）【附源码】的基础上添加了两个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. websocket vue

    /* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...

  2. 将java文件编译成class文件

    一般情况下,在myeclipse中保存java文件后会自动编译成class文件,但是这种情况只能编译当前工程的java文件,但是如果需要编译不是一个工程的java文件,比如在网上拷贝的java文件改如 ...

  3. Centos7:nginx的安装,配置及使用

    安装依赖 yum install gcc-c++//gcc环境 yum install -y pcre pcre-devel//PCRE:nginx的http模块使用pcre来解析正则表达式 yum ...

  4. vue-router History 本地开发环境和nginx配置

    vue-router mode=history本地开发环境配置 解决方法1.修改webpack的的devServer配置项(devServe存在于,rvue-cli2在webapck.config.j ...

  5. git clone ssh 时出现 fatal: Could not read from remote repository

    一.问题及解决办法参考: 在 ubuntu 中,要把 GitHub 上的储存库克隆到计算机上时,执行如下命令: git clone git@github.com:USER-NAME/REPOSITOR ...

  6. java三大框架——Struts + Hibernate + Spring

    Struts主要负责表示层的显示 Spring利用它的IOC和AOP来处理控制业务(负责对数据库的操作) Hibernate主要是数据持久化到数据库 再用jsp的servlet做网页开发的时候有个 w ...

  7. Nginx作为静态资源web服务之缓存原理

    Nginx作为静态资源web服务之缓存原理 大致理一下http浏览器缓存原理: 浏览器第一次请求服务器,此时浏览器肯定没有缓存,则直接调用服务器端,服务器在返回的信息的信息头中添加 ETag和Last ...

  8. Swift调用微信支付宝SDK(Swift4.0)

    1.第一步在程序入口注册微信  (支付宝不需要) func application(_ application: UIApplication, didFinishLaunchingWithOption ...

  9. YII2中controller中的behaviors中的behavior内部是如何被使用的？

    1. behaviors方法的调用: 在祖先对象components中有一个ensureBehaviors方法,代码如下: /** * Makes sure that the behaviors de ...

  10. ado.net 断开 非断开

    非断开 SqlConnection SqlCommand / SqlDataReader 接 断开 SqlConnection SqlDataAdapter / DataSet 接