html5

从文件服务器读取音视频文件，以流的方式传给前台，并能够播放视频。 做了一个demo，用html5的video，audio标签实现。 后台实现代码： @GetMapping(value = " /getVideos " ) public String getVideos(HttpServletRequest request, HttpServletResponse response) { try { FileInputStream fis = null ; OutputStream os = null ; fis = new FileInputStream( " C:\\Users\\zhangxin\\Desktop\\douyin.mp4 " ); int size = fis.available(); // 得到文件大小 byte data[] = new byte [size]; fis.read(data); // 读数据 fis.close(); fis = null ; response.setContentType( " video/mp4 " ); // 设置返回的文件类型 os = response.getOutputStream(); os.write(data); os.flush(); os.close(); os = null ; } catch

解决html5中video标签无法播放mp4问题的办法 参考文章： （1）解决html5中video标签无法播放mp4问题的办法 （2）https://www.cnblogs.com/it-tsz/p/9319321.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/3797416/blog/4871875

Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 canvas因为是html5引入的， 存在兼容性问题 体验Canvas 什么是Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： /*属性 width 和 height属性指的是画布的大小*/ <canvas id="myCanvas" width="200" height="100"></canvas> 注意：不要在css中设置canvas的宽高，css中设置的是canvas的大小，而不是canvas中画布的大小 通过JavaScript来绘制 /*获取元素*/ var myCanvas = document.querySelector('#myCanvas'

1. 操作Cookie 有时候我们想要验证浏览器中cookie是否正确，因为基于真实cookie的测试是无法通过白盒和集成测试的。WebDriver提供了操作Cookie的相关方法，可以读取、添加和删除cookie信息。 WebDriver操作cookie的方法： get_cookies()：获得所有cookie信息 ge_cookie(name)：返回字典的key为“name”的cookie信息 add_cookie(cookie_dict)：添加cookie。“cookie_dict”指字典对象，必须有name和value值 delete_cookie(name,optionsString)：删除cookie信息。“name” 是要删除的cookie的名称，“optionsString”是该cookie的选项，目前支持的选项包括“路径” delete_all_cookies()：删除所有信息 下面通过get_cookies()来换取当前浏览器的cookie信息。 from selenium import webdriver wd = webdriver.Chrome() wd.get( ' http://youdao.com ' ) # 获得cookie信息 cookies = wd.get_cookies() # 将获得cookie的信息打印 print (cookies)

本文由葡萄城技术团队原创并首发 转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 12月28日消息，微软已经确认Windows 10在下一次更新时将自动删除Flash Player，这意味着Flash Player将正式成为历史。 Flash曾是互联网的一段传奇，它统一了互联网的内容创作模式，做到了真正的一次编写，到处运行，让每个人都有可能成为动画师和艺术家。 然而，随着移动互联时代的到来，Flash也逐渐暴露出越来越多的技术短板，耗电、运行速度慢以及安全隐患甚至一度让乔布斯对其彻底失去了信心。2017年7月25日， Adobe官方声明：2020年12月31日，将停止更新和发行Flash Player（EOL），这意味着 Flash Player在这一刻终于成为了历史： 自终止日期之后，Adobe不会继续发布Flash Player更新或安全补丁 从2021年1月12日开始禁止Flash内容在Flash Player中运行 主要的浏览器供应商也将在EOL日期之后禁止Flash Player运行 Flash Player 前世：因带宽限制而兴 在2000年前后，互联网已经开始在国内普及，受带宽的限制（当年主流拨号是56K的modem，有个128K的ISDN就算是土豪了），网页内容大多以静态方式呈现

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。 在线演示 源码下载 2、HTML5火焰文字特效 今天我们分享的这款HTML5文字特效是火焰燃烧的效果，比较消耗CPU，但是动画效果还是比较酷的。另外，再推荐一款HTML5文字特效：HTML5像素文字爆炸重组动画特效 在线演示 源码下载 3、HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。 在线演示 源码下载 4、HTML5 Canvas生成粒子效果的人物头像 今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像，你可以任意选择一张头像图片，接下来该图片会被打散成许多粒子，然后慢慢的重组成图片，鼠标滑过图片时粒子还会出现浮动的动画特效，看上去非常酷。 在线演示 源码下载 5、HTML5粒子效果的文字动画特效 今天要分享的也是一款基于HTML5的粒子效果的文字动画特效

smart-doc是一款同时支持JAVA REST API和Apache Dubbo RPC接口文档生成的工具，smart-doc在业内率先提出基于java泛型定义推导的理念， 完全基于接口源码来分析生成接口文档，不采用任何注解侵入到业务代码中。你只需要按照javadoc标准编写注释， smart-doc就能帮你生成一个简易明了的Markdown、HTML5文档，甚至可以直接生成Postman collection导入到Postman做api接口调试 smart-doc 1.9.8 已经发布，此版本更新内容包括： New Features 增加对抽象Controller方法的解析。 支持ResponseBodyAdvice通用接口响应包装设置。 忽略对Class对象的解析。 Bug Fixes 修改阿里版本dubbo注解名称解析错误。 修改模拟值生成错误。 修复类同时继承和基类和实现接口中可能出现字段重复的bug。 本文分享自微信公众号 - Laravel技术社区（Laravel360）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“ OSC源创计划 ”，欢迎正在阅读的你也加入，一起分享。 来源： oschina 链接： https://my.oschina.net/u/3372402/blog/4708798

smart-doc 是一款同时支持 java restful api 和 Apache Dubbo rpc 接口文档生成的工具，smart-doc 颠覆了传统类似 swagger 这种大量采用注解侵入来生成文档的实现方法。 smart-doc 完全基于接口源码分析来生成接口文档，完全做到零注解侵入，你只需要按照 java 标准注释编写，smart-doc 就能帮你生成一个简易明了的 markdown 或是一个像 GitBook 样式的静态 html 文档。如果你已经厌倦了 swagger 等文档工具的无数注解和强侵入污染，那请拥抱 smart-doc 吧！ 功能特性 支持接口 debug。 零注解、零学习成本、只需要写标准 java 注释。 基于源代码接口定义自动推导，强大的返回结构推导。 支持 Spring MVC,Spring Boot,Spring Boot Web Flux(controller 书写方式)。 支持 Callable,Future,CompletableFuture 等异步接口返回的推导。 支持 JavaBean 上的 JSR303 参数校验规范，支持分组验证。 对 json 请求参数的接口能够自动生成模拟 json 参数。 对一些常用字段定义能够生成有效的模拟值。 支持生成 json 返回值示例。 支持从项目外部加载源代码来生成字段注释(包括标准规范发布的

在确定了前台系统的详细规划和整体功能以后，花费时间更多的其实是对技术细节的打磨。本篇文章是一个对前台开发技术进行概要整理，也会对其他的分主题进行一些引导。 本文来源：魚立说。本文链接： https://www.yulisay.com/d/frontskill.html ，支持微信浏览器打开。 更多精彩文章，请移步 魚立说个人网站 翻看。欢迎欣赏，吐槽不足之处。 本主题借鉴我开发个人网站 魚立说 的经验，整理了在开发前台系统过程可能会遇到的各种技术要点。整个系列由以下几个文章部分组成： 前台开发技术小结 动起来的网站元素 而且，涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 front-skills 目录，若觉得有用，请分享并 star 。 前台开发小结 下面对前台系统的开发技术要点依次进行概括，包括必要的说明和资源引导。 CSS 使用技巧 :root 是一个伪类，表示文档根元素。在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在文件，都可以使用 var() 来引用。 要除去多余的 CSS 样式，有一个叫 CSS remove and combine 的 Chrome 插件可以参考，可以生成未使用的选择器分析报告。下载地址： http://www.cnplugins.com/devtool

在一些情况要满足html5的要求时，不能直接使用组件时，我们可以使用is属性来实现 例如： <div id="app-3"> <table> <tbody> <todo-item></todo-item> <todo-item></todo-item> <todo-item></todo-item> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('todo-item', { template: '<tr><td>Hello</td></tr>' }) var app3 = new Vue({ el: '#app-3', }) </script> 显示结果 我们看到 <tr> 显示在 <table> 外面，这是错误的，那么如何修改呢？ <div id="app-3"> <table> <tbody> <tr is="todo-item"></tr> <tr is="todo-item"></tr> <tr is="todo-item"></tr> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist