腾讯视频云点播　　传送门

　　项目在腾讯云点播服务之视频的上传（上）【附源码】的基础上添加了两个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. IIS--解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项。试图加载

    解决64位系统IIS网站发布出现未能加载文件或程序集“...”或它的某一个依赖项.试图加载 ASP.NET MVC 项目发布的在本地IIS后,启动网站出现未能加载文件或程序集“…”或它的某一个依赖项. ...

  2. jvm 中内存的栈和数据结构中的栈的区别

    1.常见的数据结构:栈.队列.数组.链表和红黑树,java内存划分 2.JYM中的栈是先进先出,先入栈的先执行: 2.数据结构中的栈是先进后出,类似手枪的弹夹,先进入的子弹最后才发射: 3.数据结构中 ...

  3. 点击登录页面成功后，后端返回数据需要保存，在另外一个页面，发送ajax请求的时候需要登录返回数据的其中的一部分当做参数然后拿到新的数据

    对于这个怎么操作首先我们要在登录的ajax请求中把后端的数据保存到sessionstorage中,代码如下 登录ajax $.ajax({ type:'post', url:xxxxxxxxx, da ...

  4. WebStrom 中文显示异常中文变样乱码

    问题描述 WebStorm 编辑文件时中文显示异常,大小不一 菜单栏字体需要更换 解决方法 修改编辑器字体 菜单栏默认字体取消 设置效果 编辑文件时中英文显示 菜单栏 其他相关 关于编码格式,这里未做 ...

  5. js之语句——案例

    以下为js语句的案例题,虽然简单,但是里面涉及到语句的嵌套,多个参数,需要好好分析. 1.求出1-100之间所有奇/偶数之和 <script> var sum = 0; for (var ...

  6. JavaScript笔记(3)

    字典(Array对象) Array对象当字典使用时,.length属性就不能使用了 如果想访问对象元素,不能使用索引,只能使用key 如果遍历字典,只能使用for--in语句 字典是另一种可变容器模型 ...

  7. vue中的常用三元

    点击事件的三元 <el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()& ...

  8. vue项目性能优化总结

    在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大.所以通过搜集网上所有对于vu ...

  9. vue使用scss应该安装哪些依赖

    通过vue-cli搭建的项目如果想使用scss的话除了安装sass-loader,还需要安装node-sass cnpm install sass-loader node-sass -D

  10. 微软宣布加入机密计算联盟，与谷歌和BAT 等巨头联手保护数据安全

    联盟创始成员还包括阿里巴巴.Arm.百度.谷歌.IBM.英特尔.红帽.瑞士电信和腾讯等科技公司,它提供了一个让行业聚集起来的机会,以促进使用机密计算来更好地保护数据. 建立机密计算联盟的需求源于这样一 ...