明月看潮生
明月看潮生

编程笔记 html5&css&js 031 HTML视频

编程笔记 html5&css&js 031 HTML视频

  • 一、`
  • 二、属性
  • 三、事件
  • 四、嵌入视频页面
  • 五、练习
  • 小结

视频应用广泛，当前的互联网应用中，视频越来越重要，比如抖音、快手、腾讯视频等应用。

一、: 视频元素

HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。
和 元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

二、属性

类似于所有其他 HTML 元素，video 元素也支持 全局属性。
autoplay
布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
备注： 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的 自动播放指南。如果使用 autoplay=“false” 来关闭视频的自动播放功能，会不起作用；只要 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。
controls
加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
controlslist 实验性非标准
当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。
允许的值有 nodownload、nofullscreen 和 noremoteplayback。
如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 元素中被重用，而不会被污染。允许的值如下：
anonymous
在发送跨域请求时不携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。
use-credentials
在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin: HTTP 请求首部），保证其在 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。查看 CORS 设置属性 (en-US) 获取更多信息。
disablepictureinpicture 实验性
防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用
disableRemotePlayback 实验性
布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，你可以使用 x-webkit-airplay=“deny” 作为兜底方案。
height
视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。
loop
布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
muted
布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。
playsinline
布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
none: 表示不应该预加载视频。
metadata: 表示仅预先获取视频的元数据（例如长度）。
auto: 表示可以下载整个视频文件，即使用户不希望使用它。
空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。
备注： autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。
src
要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

三、事件

事件名	触发时机
audioprocess (en-US)已弃用	The input buffer of a ScriptProcessorNode is ready to be processed.
canplay	浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。
canplaythrough	浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete	OfflineAudioContext 渲染完成。
durationchange	duration 属性的值改变时触发。
emptied (en-US)	媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。
ended	视频停止播放，因为 media 已经到达结束点。
loadeddata	media 中的首帧已经完成加载。
loadedmetadata	已加载元数据。
pause	播放已暂停。
play	播放已开始。
playing	由于缺乏数据而暂停或延迟后，播放准备开始。
progress	在浏览器加载资源时周期性触发。
ratechange (en-US)	播放速率发生变化。
seeked (en-US)	跳帧（seek）操作完成。
seeking (en-US)	跳帧（seek）操作开始。
stalled (en-US)	用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。
suspend (en-US)	媒体数据加载已暂停。
timeupdate	currentTime 属性指定的时间发生变化。
volumechange (en-US)	音量发生变化。
waiting (en-US)	由于暂时缺少数据，播放已停止。

使用说明
浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
其他的使用注意事项：
如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。HTMLMediaElement 会激活许多不同的事件 ，以便于让你可以控制视频（和音频）内容。
你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

四、嵌入视频页面

还可以把其他视频网站的视频嵌入到网页。看下面练习中的例子，嵌入了腾讯视频的播放页面。

五、练习

DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js HTML视频title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    style>
    <body>
        <div class="container">
            <h1>视频：青少年成长管理 引言h1>
            <video width="320" height="240" controls="controls">
                <source src="mp4/00 青少年成长管理 引言 (1).mp4" type="video/mp4" />
            video>
        div>
        <div class="container">
            <h1>腾讯视频：斗破苍穹第4季h1>
            <p style="text-align: center">
                
                <iframe
                    class="video_iframe"
                    style="z-index: 1"
                    src="http://v.qq.com/iframe/player.html?vid=i0043frto05&width=500&height=375&auto=0"
                    allowfullscreen=""
                    frameborder="0"
                    height="375"
                    width="500"
                >iframe>
            p>
        div>
    body>
html>

小结

需要时再详细掌握。

你可能感兴趣的:(#,html5,css3,javascript,少年工程师)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • 车载刷写架构 --- 整车刷写中为何增加了ECU 队列刷写策略？ 汽车电子实验室 电子电器架构——刷写方案车载电子电气架构架构开发语言车载诊断进阶篇汽车中央控制单元HPC软件架构关于网关转发性能引起的思考
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：周末洗了一个澡，换了一身衣服，出了门却不知道去哪儿，不知道去找谁，漫无目的走着，大概这就是成年人最深的孤独吧!旧人不知我近况，新人不知我过往，近况不该旧人知，过往不与新人讲。纵你阅人何其多，再无一人恰似我。时间不知不觉中，来到新的一年。2025开始新的忙碌。成年人的我也不知道去哪里渡
  • 车载诊断架构 ---面向售后的DTC应该怎么样填写？ 汽车电子实验室 车载电子电气架构漫谈UDS诊断协议系列EV（电动汽车）常规知识必备架构面向售后的DTC车载诊断架构OEM怎么掌握软件开发能力车载通信网络槪述androidZEVonUDS-J1979
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身边有这样灵性的人，一定要好好珍惜他们眼中有神有光，干净，给人感觉很舒服，有超强的感知能力有形的无形的感知力很强，能感知人的内心变化喜欢独处，好静，
  • 车载诊断架构 --- 关于诊断时间参数P4的浅析 汽车电子实验室 车载电子电气架构漫谈UDS诊断协议系列架构开发语言关于网关转发性能引起的思考汽车中央控制单元HPC软件架构车载诊断进阶篇
    关于诊断时间参数P4的浅析我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的豁达，往不幸上面喷“香水”来掩盖问题。无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事.而不是让内心的烦
  • 车载刷写架构 --- 刷写思考扩展 汽车电子实验室 电子电器架构——刷写方案架构开发语言关于网关转发性能引起的思考汽车中央控制单元HPC软件架构车载诊断进阶篇
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是系统思考、大胆设计、小心求证；三是“一张纸制度”，也就是无论多么复杂的工作内容，要在一张纸上描述清楚；四是要坚决反对虎头蛇尾，反对繁文缛节，反对老
  • 为什么焦虑、抑郁、自残的青少年越来越多？ 精神健康
    很多家长觉得没缺孩子吃的穿的，他们有安稳的生活，他们有什么可焦虑、抑郁的，但现在的孩子，学习压力越来越大，每天休息的时间越来越少，出现焦虑抑郁是很正常的。从发展的角度看，青少年时期，人的身体、情绪，智力、人格都急剧发展，正从未成熟走向成熟，情绪起伏不定，易冲动，再者，由于缺乏生活经验，以及来自于家长、学校、社会的各种要求和压力，从而不知所措，心中的焦虑、恐惧、彷徨得不到及时的排解，从而导致心理上的
  • 人民日报每日金句摘抄精选8.1 飞云写作
    1.岁月因青春慨然以赴而更加静好，世间因少年挺身向前而更加瑰丽。2.与其朋友圈字斟句酌，不如现实中好好生活。3.真正的优秀不是别人逼出来的，而是自己和自己死磕。4.时代的考题已经列出，我们的答卷正在写就。5.人生不就是这样，经历过一次次考验才能成长；人生不就是这样，哪怕雨雪霏霾也要去追寻阳光。6.忆往昔，百年征程砥砺“同心”；看今朝，千秋伟业催人奋进。7.真理的波涛，喷涌而出就奔流不息；理想的火焰
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • 【剽悍读书营成长记录】十天，稍纵即逝 慢慢存钱
    又一个十天过去了，又一个主题营结束了。回顾这十天的时间，如过眼云烟，稍纵即逝。1.买书得知这次主题营要读的书必须是纸质版，我就有点慌神儿了。记得上次去书店，还是学生时代，已经多少年没去过书店了。即便一直没去过，还想着这次终于有机会再去书店逛逛了。第二天，带我妈去医院看望住院的小舅妈，本打算抽出些时间，去书店逛一圈。但计划没有变化快，也因为这个医院附近没有书店，我要么去知道的新华书店，要么就得再附近
  • 好可怕୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭人会因为思维狭隘而限制自己的选择范围，并且导致做出糟糕选择 寻世良方Cc_Sandy拎0
    人间天堂举个例子，希思兄弟指出，青少年们的决定中，有65%左右都属于表决心式和“是否式”决定。表决心式决定是类似于“我再也不吃垃圾食品”这种；“是否式”决定指的是像“我要不要吃炸鸡”，或者“我要不要跟男朋友分手”这种决定。作者说，这其实是一种“认知气泡”。在“认知气泡”里面，人们看不到更多的选择，相当于思维被局限住。而且，这种现象不仅仅是青少年中会出现，成熟的组织也会犯同样的错误。比如，公司在收购
  • 李汶翰、徐娇领衔主演，杭州2022年亚运组委会授权电视剧《泳往直前》阵容官宣！ 楚离杜子腾
    今日，杭州亚组委授权电视剧《泳往直前》阵容官宣，由黄克敏执导，李汶翰、徐娇领衔主演。《泳往直前》是亚运会筹备工作启动以来,着手谋划创作的亚运主题文艺精品项目之一，也是杭州亚组委官方授权拍摄的唯一一部亚运主题电视剧。《泳往直前》主要讲述了四名背景各异，独具个性的少年在泳池奋力拼搏、执着追梦的故事。中年失意的游泳教练梁友光，为了证明自己的能力，四处挖掘游泳的好苗子冲刺亚运会，在发现了毫无训练经验却颇有
  • 夏有凉风 麦大西
    初夏傍晚的风，有些微凉。一个人坐在地板上，开半个瓜，用勺子挖着吃……什么也不用想，仿佛世界，就剩下了你和风，花和瓜……有些惬意，只能自己独享。所以开始怀念单身和孤独，怀念从前。怀念无忧无虑，或者少年不知愁滋味的时候。青春真好，太阳正好。——【随手成札】2022.5.27
  • Docker ℡余晖^ 黑马点评项目相关问题和笔记dockereureka容器
    在黑马点评项目中，在谈到Redisson解决redis的主从一致性问题时，弹幕提到了Docker，本文来简单了解一下Docker，我的初步理解运维是维护多个集群的稳定，那它和VM虚拟机的区别又是什么？，如果要更深入地理解与学习（运维工程师），可以到b站搜索专门的课程（SpringCloud）。一、Docker是什么？重新理解“容器化”的本质1.1Docker的定义Docker是一个开源的容器化平台
  • Java 代理机制详解：从静态代理到动态代理，彻底掌握代理模式的原理与实战 大葱白菜 java合集java开发语言后端个人开发学习代理模式
    作为一名Java开发工程师，你一定在使用Spring、MyBatis、RPC框架等技术时接触过“代理”（Proxy）这个概念。无论是Spring的AOP（面向切面编程）、事务管理，还是远程调用、日志记录、权限控制等场景，代理机制都扮演着至关重要的角色。本文将带你全面掌握：什么是代理？静态代理与动态代理的区别JDK动态代理与CGLIB动态代理的实现原理代理模式的典型应用场景代理在主流框架中的使用（如
  • java web开发实战经典 当当_java web项目实战开发 飞翔的酋长大人 javaweb开发实战经典当当
    本书以问题为导向，涵盖JavaWeb开发技术中所有的核心知识点；实战开发案例丰富，所有的知识案例都来源于企业真实项目，实战性和可操作性强；代码注释详细准确，结构简洁清晰；语言简明易懂，由浅入深地带你学会JavaWeb技术及应用。本书面向广大Java开发工程师和普通高校学生，可作为高等学校计算机及其相关专业Web编程技术课程教材，也可供从事JavaWeb应用开发的技术人员学习参考。¥80.00定价：
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
  • FloEFD 工程师使用灵活，企业如何科学管控许可证资源？
    随着制造企业对设计仿真一体化需求的增长，FloEFD作为SiemensDigitalIndustriesSoftware提供的CAD嵌入式计算流体动力学（CFD）工具，凭借与SolidWorks、Creo、NX、CATIA等主流CAD平台深度集成，广泛应用于电子散热、汽车、能源装备、流体机械等行业。FloEFD的优势在于其“工程师友好型”理念，使设计工程师可以直接在CAD环境中完成几何建模、网格生
  • 12. 什么是事件委托 yqcoder 前端面试-CSScss面试
    总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
  • 2019-3-16晨间日记 素若初心
    今天是懒懒的日子起床：10:30就寝：12:00天气：晴心情：平静纪念日：无任务清单昨日完成的任务，最重要的三件事：1、爷爷出ICU，转进病房2、儿子在家观察照顾儿子3、打扫卫生（客厅角角落落）改进：不睡懒觉习惯养成：日更英语周目标·完成进度漫无目标爷爷进病房学习·信息·阅读速读健康·饮食·锻炼多吃青菜人际·家人·朋友陪护家人工作·思考无最美好的三件事1.懒懒的早晨2.电影《少年pi》3.和儿子聊
  • 2020.2.16 易亦逍遥
    1、不在巅峰时慕名而来，亦不在低谷时转身而去。2、从此我们俩，只有死别，没有生离。——钱钟书3、要么出众，要么出局。4、同是寒窗苦读，怎可甘拜下风？5、没有受过伤的人，才会讥笑别人身上的伤痕。——莎士比亚6、当泪的潮涌渐渐退远，理想的岛屿就会浮现。——顾城7、当命运需要你们去逆风飞翔的时候，就不能随风而去。——《少年班》8、凡事皆有可能，永远别说永远。——《放牛班的春天》9、心之所向，素履所往；心
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • 11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSShtml前端
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
  • 全栈工程师必备开发利器 东风牧野 全栈开发技术网络全栈开发工具
    一、团队协作工具团队协作软件Teambition：团队协作工具创导者有道云协作：企业知识管理与协作平台tower：深受用户喜爱的团队协作工具笔记备忘印象笔记：工作必备效率应用有道云笔记：网易出品，获得5000万用户青睐的笔记软件。提供了PC端、移动端、网页端等多端应用，用户可以随时随地对线上资料进行编辑、分享以及协同。日事清：怕工作进度延误就用日事清滴答清单：一个帮你高效完成任务和规划时间的应用远
  • 贵妃将我虐待致死后，暴君杀疯了(皇后薛贵妃)热门小说免费阅读_热门免费小说贵妃将我虐待致死后，暴君杀疯了皇后薛贵妃 小富江呀
    贵妃将我虐待致死后，暴君杀疯了》主角：皇后薛贵妃简介：我是医圣门下唯一女弟子。山中采药时，偶然救了一受伤少年。少年信誓旦旦，说长大定娶我为妻。我权当玩笑，没放心上。十年后，少年成为了一代暴君。在我和师兄的大婚之日，他带兵杀死我师兄，将我抢进了宫。“朕说过会娶你。你的夫君，只能是朕！”为表真心，他封我为后，独宠我一人。朝中大臣提出异议，便被五马分尸。可我不爱他，更无法接受这个杀我师兄的暴君。无论他如
  • 9、Docker Compose 实战 小醉你真好 #部署不求人docker容器运维
    DockerCompose实战教程（含完整Nginx案例+配置项详解）适合读者：开发者、后端工程师、运维工程师、初学者环境要求：CentOS9+Docker已安装教程亮点：实战驱动、配置项详解、挂载说明、可直接复制使用标签：#Docker#DockerCompose#运维实战#Nginx部署一、什么是DockerCompose？DockerCompose是Docker官方推出的多容器应用编排工具，
  • Hystrix停更了，Sentinel能接班吗？熔断降级技术深度对比！ 我爱娃哈哈 分布式技术原理与实战hystrixsentinel
    Hystrix停更了，Sentinel能接班吗？熔断降级技术深度对比！一、开场白：熔断降级，真能救活你的系统？还记得第一次遇到服务雪崩，老板一句话："你熔断降级做了吗？"我一脸懵："熔断降级？不就是Hystrix吗？"结果一查，Hystrix已经停更了，Sentinel成了新宠！今天咱们就聊聊，Hystrix到底是怎么工作的？Sentinel又有什么优势？一线后端工程师的深度技术对比！二、熔断降级
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • 时间组件库Day.js那些事 前端小白花 javascript开发语言ecmascript
    一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
  • 二分查找排序算法 周凡杨 java二分查找排序算法折半
    一：概念 二分查找又称 折半查找（ 折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而 查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表 分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步
  • java中的BigDecimal bijian1013 javaBigDecimal
            在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de
  • Shell echo命令详解 daizj echoshell
    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义
  • Oracle DBA 简单操作 周凡杨 oracle dba sql
    --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb
  • 画图重绘 朱辉辉33 游戏
      我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们
  • 线程之初体验 西蜀石兰 线程
    一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。 之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。 线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。 你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja
  • linux集群互相免登陆配置 林鹤霄 linux
    配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c
  • mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
    原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储
  • Socket编程 基本的聊天实现。 alleni123 socket
    public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi
  • 多线程监听器事件模式(一个简单的例子) 百合不是茶 线程监听模式
        多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队
  • spring InitializingBean接口 bijian1013 javaspring
    spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT
  • Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle数据库权限
            Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"
  • 【Struts2五】Struts2 参数传值 bit1129 struts2
    Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言
  • 【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
    I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or
  • nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
    nginx gzip压缩配置 更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用
  • java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
    two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;
  • Spring源码学习-JdbcTemplate queryForObject bylijinnan javaspring
    JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查
  • [冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
         看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb
  • js 获取浏览器型号 cuityang js浏览器
    根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=
  • C# socks5详解 转 dalan_123 socketC#
    http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，
  • 运维 Centos问题汇总 dcj3sjt126com 云主机
    一、sh 脚本不执行的原因 sh脚本不执行的原因 只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数
  • Yii防注入攻击笔记 dcj3sjt126com sqlWEB安全yii
    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号 这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl
  • MongoDB简介[一] eksliang mongodbMongoDB简介
    MongoDB简介 转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不
  • zookeeper windows 入门安装和测试 greemranqq zookeeper安装分布式
    一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视
  • Spring之使用事务缘由(2-注解实现) ihuning spring
      Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.
  • iOS App Launch Option 啸笑天 option
    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。 1、若用户直接
  • jdk与jre的区别（_） macroli javajvmjdk
    简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。 如果安装了JDK，会发同你
  • Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象git
    $ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]
  • [一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hivehive元数据结构
    关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。 本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，
  • Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
      Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他