腾讯视频云点播　　传送门

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

    1.Perl 运算符运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5.Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符,比较运算符,逻辑运算符,赋值运算符,位 ...

  2. c#中异常捕获，回滚

    语法: try { 有可能出现错误的代码写在这里 } catch { 出错后的处理 } 如果try中的代码没有出错,则程序正常运行try中的内容后,不会执行catch中的内容, 如果try中的代码一但 ...

  3. docker容器里面安装php的redis扩展

      docker exec -i -t php /bin/bash 进入php容器内执行:pecl install -o -f redis  修改php.ini,添加:extension=redis. ...

  4. 用Python输出一个Fibonacci数列

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列” 用文字来说, ...

  5. delphi FMX APP程序图标，闪屏,程序名

  6. SQL语句复习【专题五】

    SQL语句复习[专题五] 单行子查询:只会得到一个结果的子查询[子查询的内容必须放在小括号中.在查询语句中的查询语句 ]--查询所有比 CLARK 员工 工资高的员工--1.先查询 CLARK 员工的 ...

  7. 3.NumPy - 数组属性

    1.ndarray.shape 这一数组属性返回一个包含数组维度的元组,它也可以用于调整数组大小 # -*- coding: utf-8 -*- import numpy as np a = np.a ...

  8. imx6ull增加qt5 qtserialbus库

    meta-qt5库地址:https://code.qt.io/cgit/yocto/meta-qt5.git/   1.在fsl-release-yocto/sources/meta-qt5/reci ...

  9. 使用cJSON解析JSON

    cJSON获取数组元素的每个值 { "operType": 0x5, "field": ["time","matchRule&qu ...

  10. 【异常记录(十)】 接口调用，提示跨域 Cross-domain calling interface, Access-Control-Allow-Origin

    头的 Access-Control-Allow-Origin(允许访问的域) 改成 * : Response.AddHeader("Access-Control-Allow-Origin&q ...