腾讯视频云点播　　传送门

　　项目在腾讯云点播服务之视频的上传（上）【附源码】的基础上添加了两个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. java实现spark常用算子之SaveAsTextFile

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  2. vue导航栏制作

    1,在components新建commnn目录,然后再新建nav目录,在此目录下新建nav-bottom.vue文件和nav-item.vue文件 2,nav-bottom.vue中的内容: < ...

  3. Js-声明变量

    JS声明变量 js声明变量的方式有3种:let,const,var 1.const如果定义简单数据类型,变成常量,变量值不可以更改. const name="lili"; name ...

  4. rabbitmq 连接报错 An unexpected connection driver error occured

    转自:https://blog.csdn.net/zht741322694/article/details/82801873 在服务器上安装了一个RabbitMq,并新创建了一个用户授予了管理员角色, ...

  5. REST easy with kbmMW #1

    kbmMW 5.0支持REST服务器的开发,并且非常简单,下面看看如何实作一个REST服务器. 首先我们制作一个服务器应用程序,增加一个简单的Form,并放置kbmMW组件. 在Delphi中单击Fi ...

  6. Linux(CentOS)下编译安装apache

    Centos7.6系统 已经安装lnmp一键环境 想装个apache跑php7 (php7的安装以及与apache的交互在这里: https://www.cnblogs.com/lz0925/p/11 ...

  7. MySQL查询多行重复数据SQL

    1 详见如下 SELECT day_time,`city_code`,count(1) as num FROM t_user_register_analyse GROUP BY `day_time`, ...

  8. A主机ping B主机发生了什么？

    计算机网络面试题:A主机ping B主机发生了什么? 众所周知,ping命令使用的是ICMP协议包,那么A主机ping B主机到底发生了什么呢? 1 ping介绍 ping(Packet Intern ...

  9. python的索引与切片和元祖

    '''索引: 1.索引从0开始 2.末尾元素为 -1 3.能被for循环,有序的数据集合 切片: 1.顾头不顾尾 2.a = "123abcdfg" print(a[0::2]) ...

  10. php正则表达式验证手机/固定电话/邮箱/身份证/银行卡自定义函数

    /** * 验证手机号码格式 * @param string $phone 手机号 * @return boolean */ function is_phone($phone) { $chars = ...