video-05-videojs编写（全屏、非全屏）自定义控件！！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电视台</title>
    <!--引入video.js文件-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <style type="text/css">
        .waike {
            position: relative;
        }

        #kongJianID {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 9999;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="waike">
        <video id="example-video" class="video-js">
        </video>
        <div id="kongJianID">
            <button class="control" onclick=operation("play")>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("volumeDown")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
        </div>
    </div>



</body>

</html>
<script type="text/javascript">
    var kongJianDom = null
    var videoDom = null
    //      	video标签id,
    //      	配置选项(data-setup='{}'),
    //      	videojs初始化完成回调函数
    // var kongJianChange = () => {
    //     kongJianDom = document.getElementById("kongJianID")
    //     videoDom = document.getElementById("example-video")
    //     videoDom.appendChild(kongJianDom)
    // }
    var myPlayer = videojs('example-video', {
        title: 'Oceans',
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true, // 显示播放的控件
        fluid: true, // 自适应宽高
        playbackRates: [0.5, 1, 1.5, 2, 3, 4],
        "sources": [{
            src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
            type: 'video/mp4'
        }],
        controlBar: {
            // 设置控制条组件
            currentTimeDisplay: true,
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
            volumePanel: {
                inline: true
            },
            children: [{
                name: 'playToggle'
            }, // 播放/暂停按钮
            {
                name: 'currentTimeDisplay'
            }, // 视频当前已播放时间
            {
                name: 'progressControl'
            }, // 播放进度条
            {
                name: 'durationDisplay'
            }, // 视频播放总时间
            {
                // 倍速播放
                name: 'playbackRateMenuButton',
                playbackRates: [0.5, 1, 1.5, 2]
            },
            {
                name: 'volumePanel', // 音量控制
                inline: false // 不使用水平方式
            },
            {
                name: 'FullscreenToggle'
            } // 全屏
            ]
        }
    }, function onPlayerReady() {
        // var myPlayer = this;
        //在回调函数中，this代表当前播放器，
        //可以调用方法，也可以绑定事件。
        /**
         * 事件events    绑定事件用on    移除事件用off
         */
        this.on('suspend', function () {//延迟下载
            console.log("延迟下载")
        });
        this.on('loadstart', function () { //客户端开始请求数据
            console.log("客户端开始请求数据")
        });
        this.on('fullscreenchange', function () { //客户端开始请求数据
            console.log("全屏切换事件")
        });
        this.on('progress', function () {//客户端正在请求数据
            console.log("客户端正在请求数据")
        });
        this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
            console.log("客户端主动终止下载")
        });
        this.on('error', function () {//请求数据时遇到错误
            console.log("请求数据时遇到错误")
        });
        this.on('stalled', function () {//网速失速
            console.log("网速失速")
        });
        this.on('play', function () {//开始播放
            console.log("开始播放")
        });
        this.on('pause', function () {//暂停
            console.log("暂停")
        });
        this.on('loadedmetadata', function () {//成功获取资源长度
            console.log("成功获取资源长度")
        });
        this.on('loadeddata', function () {//渲染播放画面
            console.log("渲染播放画面")
        });
        this.on('waiting', function () {//等待数据，并非错误
            console.log("等待数据")
        });
        this.on('playing', function () {//开始回放
            console.log("开始回放")
        });
        this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
            console.log("可以播放，但中途可能因为加载而暂停")
        });
        this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
            console.log("可以播放，歌曲全部加载完毕")
        });
        this.on('seeking', function () { //寻找中
            console.log("寻找中")
        });
        this.on('seeked', function () {//寻找完毕
            console.log("寻找完毕")
        });
        this.on('timeupdate', function () {//播放时间改变
            console.log("播放时间改变")
        });
        this.on('ended', function () {//播放结束
            console.log("播放结束")
        });
        this.on('ratechange', function () {//播放速率改变
            console.log("播放速率改变")
        });
        this.on('durationchange', function () {//资源长度改变
            console.log("资源长度改变")
        });
        this.on('volumechange', function () {//音量改变
            console.log("音量改变")
        });
    });
    /**
     * 方法
     */
    function operation(param) {
        console.log(param)
        if ("play" == param) {	//开始播放
            myPlayer.play();
        } else if ("stop" == param) {	//停止播放
            myPlayer.pause();
        } else if ("fastForward" == param) { //快进
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(10 + whereYouAt);
        } else if ("reload" == param) {	//重新加载
            myPlayer.pause();
            myPlayer.load();
            myPlayer.play();
        } else if ("back" == param) {	//后退
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(whereYouAt - 10);
        } else if ("fullScreen" == param) {	//全屏
            myPlayer.requestFullscreen();
        } else if ("exitFullScreen" == param) {	//退出全屏
            myPlayer.exitFullscreen();
        } else if ("volumeUp" == param) {	//音量加
            var howLoudIsIt = myPlayer.volume();
            myPlayer.volume(howLoudIsIt + 10);
        } else if ("volumeDown" == param) {	//音量减
            var howLoudIsIt = myPlayer.volume();
            console.log(howLoudIsIt)
            myPlayer.volume(howLoudIsIt - 10);
        } else if ("reset" == param) {	//重置，视频不会播放	
            myPlayer.reset();
        }
    }
</script>

2.2 方法二（全屏、非全屏都可以实现！！）

2.2.1 思路（仔细看，很重要！！！）

这个当时项目编写的时候写了很久，因为没有思路，我需要写一个全屏控件，但是各种方案都试了，什么层级覆盖啥的，都不行，后来我看了看dom结构，只有被id为example-video的盒子包裹住的dom，全屏才会展示，所以我当时，想可不可以通过创建一个dom，然后添加到这里是不是也可以，测试了一下是可行的，但是我很块发现，创建dom，编写上去好难，因为我的页面逻辑比较多，询问了公司大佬，大佬提供了牛逼牛逼思路：就是先将页面写好，再将实体dom移动到对应位置！！！

2.2.2 效果

非全屏

全屏

2.2.3 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电视台</title>
    <!--引入video.js文件-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <style type="text/css">
        .waike {
            position: relative;
        }

        #kongJianID {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 9999;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="waike">
        <video id="example-video" class="video-js">
        </video>
        <div id="kongJianID">
            <button class="control" onclick=operation("play")>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("volumeDown")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
            <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
        </div>
    </div>



</body>

</html>
<script type="text/javascript">
    var kongJianDom = null
    var videoDom = null
    //      	video标签id,
    //      	配置选项(data-setup='{}'),
    //      	videojs初始化完成回调函数
    var kongJianChange = () => {
        //核心函数
        kongJianDom = document.getElementById("kongJianID")
        videoDom = document.getElementById("example-video")
        videoDom.appendChild(kongJianDom)
    }
    var myPlayer = videojs('example-video', {
        title: 'Oceans',
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true, // 显示播放的控件
        fluid: true, // 自适应宽高
        playbackRates: [0.5, 1, 1.5, 2, 3, 4],
        "sources": [{
            src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
            type: 'video/mp4'
        }],
        controlBar: {
            // 设置控制条组件
            currentTimeDisplay: true,
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
            volumePanel: {
                inline: true
            },
            children: [{
                name: 'playToggle'
            }, // 播放/暂停按钮
            {
                name: 'currentTimeDisplay'
            }, // 视频当前已播放时间
            {
                name: 'progressControl'
            }, // 播放进度条
            {
                name: 'durationDisplay'
            }, // 视频播放总时间
            {
                // 倍速播放
                name: 'playbackRateMenuButton',
                playbackRates: [0.5, 1, 1.5, 2]
            },
            {
                name: 'volumePanel', // 音量控制
                inline: false // 不使用水平方式
            },
            {
                name: 'FullscreenToggle'
            } // 全屏
            ]
        }
    }, function onPlayerReady() {
        // var myPlayer = this;
        //在回调函数中，this代表当前播放器，
        //可以调用方法，也可以绑定事件。
        /**
         * 事件events    绑定事件用on    移除事件用off
         */
        this.on('suspend', function () {//延迟下载
            console.log("延迟下载")
        });
        this.on('loadstart', function () { //客户端开始请求数据
            console.log("客户端开始请求数据")
        });
        this.on('fullscreenchange', function () { //客户端开始请求数据
            console.log("全屏切换事件")
        });
        this.on('progress', function () {//客户端正在请求数据
            console.log("客户端正在请求数据")
        });
        this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
            console.log("客户端主动终止下载")
        });
        this.on('error', function () {//请求数据时遇到错误
            console.log("请求数据时遇到错误")
        });
        this.on('stalled', function () {//网速失速
            console.log("网速失速")
        });
        this.on('play', function () {//开始播放
            console.log("开始播放")
        });
        this.on('pause', function () {//暂停
            console.log("暂停")
        });
        this.on('loadedmetadata', function () {//成功获取资源长度
            console.log("成功获取资源长度")
            kongJianChange()
        });
        this.on('loadeddata', function () {//渲染播放画面
            console.log("渲染播放画面")
        });
        this.on('waiting', function () {//等待数据，并非错误
            console.log("等待数据")
        });
        this.on('playing', function () {//开始回放
            console.log("开始回放")
        });
        this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
            console.log("可以播放，但中途可能因为加载而暂停")
        });
        this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
            console.log("可以播放，歌曲全部加载完毕")
        });
        this.on('seeking', function () { //寻找中
            console.log("寻找中")
        });
        this.on('seeked', function () {//寻找完毕
            console.log("寻找完毕")
        });
        this.on('timeupdate', function () {//播放时间改变
            console.log("播放时间改变")
        });
        this.on('ended', function () {//播放结束
            console.log("播放结束")
        });
        this.on('ratechange', function () {//播放速率改变
            console.log("播放速率改变")
        });
        this.on('durationchange', function () {//资源长度改变
            console.log("资源长度改变")
        });
        this.on('volumechange', function () {//音量改变
            console.log("音量改变")
        });
    });
    /**
     * 方法
     */
    function operation(param) {
        console.log(param)
        if ("play" == param) {	//开始播放
            myPlayer.play();
        } else if ("stop" == param) {	//停止播放
            myPlayer.pause();
        } else if ("fastForward" == param) { //快进
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(10 + whereYouAt);
        } else if ("reload" == param) {	//重新加载
            myPlayer.pause();
            myPlayer.load();
            myPlayer.play();
        } else if ("back" == param) {	//后退
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(whereYouAt - 10);
        } else if ("fullScreen" == param) {	//全屏
            myPlayer.requestFullscreen();
        } else if ("exitFullScreen" == param) {	//退出全屏
            myPlayer.exitFullscreen();
        } else if ("volumeUp" == param) {	//音量加
            var howLoudIsIt = myPlayer.volume();
            myPlayer.volume(howLoudIsIt + 10);
        } else if ("volumeDown" == param) {	//音量减
            var howLoudIsIt = myPlayer.volume();
            console.log(howLoudIsIt)
            myPlayer.volume(howLoudIsIt - 10);
        } else if ("reset" == param) {	//重置，视频不会播放	
            myPlayer.reset();
        }
    }
</script>

三、到这里全屏控件和非全屏控件结束了，你肯定想到了那些炫酷的视频播放器都是怎么做的了吧

博主在这里有一个点没有尝试，就是不使用videojs怎么写全屏控件

有了解的大牛，可以放在评论区，大家一块学习！！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

video-05-videojs编写（全屏、非全屏）自定义控件！！！！的相关文章

Chrome 扩展：browserAction.onClicked.addListener() 未被调用

我正在尝试编写一个非常简单的 Chrome 扩展此时它只是一个弹出 html 文件当单击浏览器操作图标时该文件会尝试显示警报我显然做错了什么因为警报没有触发清单 json name Simple description Sim
在 JavaScript 中将函数映射到生成器上

我有一个名为generateNumbers在 JavaScript 和另一个生成器中generateLargerNumbers它采用由生成的每个值generateNumbers并应用一个函数addOne对其而言如下 function ad
JSON字符串转JS对象

我正在使用 JS 对象通过 Google 可视化创建图表我正在尝试设计数据源首先我在客户端创建了一个 JS 对象 var JSONObject cols id date label Date type date id soldpenc
Haxe for javascript 没有全局命名空间污染？

此问题仅适用于 Haxe 版本我知道 haxe 一段时间了但直到昨天才真正使用过它出于好奇我决定移植对决 js http wmd editor com examples splitscreen 一个 javascript 端口降价
使用 React js 和 Express API 服务器通过 fetch 发布对象

我在 fetch 中的 post 方法遇到麻烦因为我的服务器从客户端接收到一个空对象我已经检查了客户端但无法发送我想要发送的值这是我的服务器 const express require express const app expre
为什么“true && () => {}”会产生“Uncaught SyntaxError：格式错误的箭头函数参数列表”？ [复制]

这个问题在这里已经有答案了下面的代码执行时 true gt yields Uncaught SyntaxError Malformed arrow function parameter list Why 编辑我知道将函数包装在括号中是
获取语音通道的用户数

我正在重写我的音乐部分朋友不和谐机器人 https top gg bot 629799045954797609 我试图弄清楚如何获取执行命令的人的语音通道中的用户数量我到处都找过但似乎找不到它或它的用法现在我正在使用以下内容 modu
尽管我正在更改状态，但 React ui 没有更新

import React useState from react const App gt const anecdotes If it hurts do it more often Adding manpower to a late sof
如何在D3节点中放置图像？

到目前为止我已经创建了这些 D3 节点用于创建可折叠的层次树到目前为止这些节点的颜色为 AA1C1C 深红色以表明如果您单击它们它们将扩展到更多节点我想要做的是在节点中使用图像中的位置这对于所有用户来说都是一个加号以知道它
YouTube - 右键单击时不显示上下文菜单

想法通过使用右键拖放到视频播放器上来查找 YouTube 视频例如每 2 屏幕宽度 1 秒因此在 1920x1080 的屏幕上如果我按下鼠标右键将其向左拖动 384 像素 20 然后松开视频应该快退 10 秒我有一个 Gr
在 Fabric.js 中进行裁剪的“toDataURL”函数中，Multiplier 属性无法正常工作

我的原始尺寸canvas is 800X700 我在用clipTo要在画布的选定部分中工作 var rect new fabric Rect left 100 top 50 fill fff width 376 height 602 str
代理阻止网络套接字？如何绕行

我有一个用 Python 编写的正在运行的 websocket 服务器来自https github com opiate SimpleWebSocketServer https github com opiate SimpleWebSoc
在 forEach() 中使用 `this` [重复]

这个问题在这里已经有答案了免责声明我正在学习 JavaScript 我有一个像这样的对象构造函数 var Palette function this colors red green blue this getColorCombinat
如何查明在 Chrome 控制台中按下按钮时会调用哪些函数？

我正在尝试自学 Google Closure javascript 库我正在检查 TreeControl UI 小部件如何使用Chrome控制台分析当我点击下面演示中的剪切按钮时运行了哪些功能例如我可以为此设置一个断点吗我尝试
AngularJS 与（Angular JS + jQuery）

我有一个关于仅使用 AngularJS 和纯 JavaScript 以及使用 AngularJS 和 jQuery 时的性能问题 ex app directive fitHeight function window return restr
如何使 Meteor 上的服务器可以访问文本文件

我很惊讶我无法在这里搜索我的答案似乎没有其他人遇到这个问题当您运行meteor服务时 js html等被打包在 meteor local build文件夹中但它似乎排除了不是js或html的内容我有一个名为 magicsets 的文
如何列出特定服务器的所有成员？

我的代码是 const list client guilds find id 335507048017952771 for user of list users console log user 1 username 这实际上没有任何作用
如何实现 chromecast 对 html5 播放器的支持

我使用js和html5设计了一个具有一些自定义功能的html5播放器现在我需要在html5播放器上添加chromecast选项例如https raw githubusercontent com kim company videojs c
TypeScript 中 C# 类虚拟成员的等效项

因此在 C 中当我创建模型类和延迟加载内容时我会执行以下操作 public int User ID get set public int Dept ID get set 然后在我的班级稍远一点的地方我像这样弹出我的虚拟 public
JavaScript：如何在 Internet Explorer 中模拟更改事件（委托）

UPDATE 回顾小提琴和赏金这个问题并没有引起太多关注所以我将花一些时间来解决这个问题我知道我的答案和问题都过于冗长这就是为什么我继续设置这把小提琴 http jsfiddle net vVA8N 在我看来这是我目前必须用来接

随机推荐

Angular4.0_开发准备

启动Angular过程介绍启动时加载了哪个页面启动时加载了哪些脚本这些脚本做了什么事默认情况下是index对应的文件是启动时加载的页面 main ts是启动时的起点文件 main ts 核心模块提供的enableProdMode用来
多媒体指令（灰度像素最大值）

如果不是处理的灰度图像那么最大值也就没什么意思了彩色图也可以转成灰度图嘛虽然用了汇编不过没有使用多媒体指令灰度图像的RGB都一样没必要使用mmx寄存器了直接对单个字节处理就行了获得最小值和获得最大值原理一样只需改一个指令
基础指南之归并排序

归并排序两个有序数组的归并数组 a 和数组 b 都是非降序的数组数组长度分别为 m 和 n 将两个数组合并成一个升序数组 c 程序如下所示 void merge int a int m int b int n int c int i
com.rabbitmq.client.ShutdownSignalException: connection error；连接rabbitMQ失败

com rabbitmq client ShutdownSignalException connection error 连接rabbitMQ失败大概率原因是权限不足 rabbitmqctl set permissions p admin
51单片机-LED篇

目录准备工作点亮一个LED灯写程序烧录 LED闪烁延时代码Delay500ms 烧录 LED流水灯代码对LED流水灯代码进行优化增加复用性延时代码代码准备工作使用到的单片机是普中51单片机使用到的软件是Keil u
写作副业怎么弄？写文章的副业应该怎么做？

现在越来越流行斜杠青年这个词了人们总是希望在做好本职工作的基础上还能够有另外一份获取收入的工作也就是副业而在副业的众多选项里很多人都看好写作这一项但是当我们普通人想要开启写作之路赚取副业收入的时候具体应该怎么
用户友好性检测

我们一般通过三个指标来检验一个网站是否对于用户友好这三个指标分别是链接的可用性访问速度体验和查找信息的便捷度一链接的可用性试想一个访问者来到你的网站点击一个超级链接却发现浏览器只返回一个错误404 页面如果网页中不可用链
Unity3D 引擎学习2022资料整理（二）

Utils C APR Apache Portable Runtime 另一个跨平台的实用函数库 Apache2 0 官网 C Algorithms 一个常用算法和数据结构的集合官网 CPL The Common Pipeline Lib
edge浏览器受信任_Edge 浏览器如何添加信任站点

Microsoft Edge 无法添加信任站点组策略没有批量设置只能逐条设置然后从DC推到所向域内客户端如果你是用Site to Zone Assignment List Enabled策略或来设置信任站点的话客户端确实无法手动添
OpenHarmony之docker容器的基本用法

Docker使用示例 docker移植至OpenHarmony的过程可参考 https blog 51cto com u 14601312 5692202 下面以rk3568 OpenHarmony为例介绍一下如何进行容器制作导入及使用
一招解决报错：pyassimp.errors.AssimpError: assimp library not found

文章目录 1 问题描述 2 原因分析 3 解决方法 1 问题描述在使用pip install pyassimp安装pyassimp库后调用时会出现错误 File root anaconda3 envs kgn lib python3 8
qt5.12.10 在linux（国产系统）的源码编译、移植问题记录

1 概述 Qt版本 Qt5 12 10 Qt 官网下载地址 Qt官网路径 Qt5 12 10源码目录目录下下载 qt everywhere src 5 12 10 tar xz 编译平台方德其余架构亦可考 2 编译源码记录 1 下载源
Flutter 最常出现的错误

哔哩哔哩漫画APP实践Flutter也有大半年时间了我针对线上收集到的错误进行分析挑选出了一些有一般代表性的错误列在本文可供实践 Flutter 的初学者们作为一点参考典型错误一无法掌握的Future 典型错误信息 NoSuch
spring boot 实现注解+自定义配置多数据库

spring boot 实现注解自定义配置多数据库配置多数据库注解 AOP maven依赖多数据源配置代码实现存在问题配置多数据库注解 AOP 你好这是你第一次使用 Markdown编辑器所展示的欢迎页如果你想学习如何
shell编程(六) : [shell基础] 基本shell脚本

接上一篇文章Linux shell编程五 Linux文件权限管理三 Linux shell 脚本编程基础了解了Linux系统和命令行的基础知识是时候开始编程了 3 1 基本shell脚本 shell脚本的关键在于输入多个命令并处理每
Google-Guava-EventBus源码解读

Guava是Google开源的一个Java基础类库它在Google内部被广泛使用 Guava提供了很多功能模块比如集合并发库缓存等 EventBus是其中的一个module 本篇结合EventBus源码来谈谈它的设计与实现概要首
基础算法题——奇怪的分式（避免小数运算）

奇怪的分式上小学的时候小明经常自己发明新算法一次老师出的题目是 1 4 乘以 8 5 小明居然把分子拼接在一起分母拼接在一起答案是 18 45 参见图1 png 老师刚想批评他转念一想这个答案凑巧也对啊真是见鬼对于分子
强大的.NET反编译工具Reflector及插件

刚接触 net 时就听说 Reflector这个强大反编译工具呢只是一直没有去使用他今天update跟我说Reflector如何如何有用用的如何如何爽还得意的说反编译了不少DLL 本来本人对新鲜事就非常有兴趣听他这么一说决定
Oracle 存储过程与函数区别

定义存储过程 Stored Procedure 是一组为了完成特定功能的SQL 语句集经编译后存储在数据库中用户通过指定存储过程的名字并给出参数如果该存储过程带有参数来执行它存储过程是数据库中的一个重要对象任何一个设计良好的
video-05-videojs编写（全屏、非全屏）自定义控件！！！！

兄弟们看到这里你马上就可以自定义控件了想想是不是都激动啊但是这篇文章重在思路及简单实现仔细看目录一控件分类二实现方案方案二最好 2 1 方案1 只能实现非全屏控件 2 1 1 思路 2 1 2 效果 2 1 3 代码

video-05-videojs编写（全屏、非全屏）自定义控件！！！！

一、控件分类

二、实现方案（方案二最好）

2.1 方案1（只能实现非全屏控件）

2.1.1 思路

2.1.2 效果

2.1.3 代码