HTML5

Html5让容器充满屏幕高度或自适应剩余高度的布局实现

在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。让容器高度充满这个屏幕在容器内容很少的情况下,要想让这个容器充满整个屏幕可以这样:.container你没看错,只需要这一个属性就可以办到,vh 是一个新的单位,表示的是屏幕的高度,还有一个对应的宽度属性 vw,如果还不知道的可以去查下资料。 »

使用Html5 Stream开发实时监控系统

这些天在尝试使用RTSP协议(Real Time Streaming Protocol,实时流传输协议)来完成实时传输和显示摄像头画面的功能,毕竟海康威视的web控件对高版本Chrome不予支持,如果使用这一套技术的话,后续的系统就难以优化升级。而RTSP协议在市面上已经有一些H5的解决方案了,是一种发展可期的方案。 H5Stream 在网上搜索web直播/摄像头直播等关键词找到了H5Stream... »

Html5在手机端调用相机的方法实现

input调用设备录像,相机等… HTML5官方文档解释:capture属性用于调用设备的摄像头或麦克风。 当accept=”audio/或video/”时capture只有两种值,一种是user,用于调用面向人脸的摄像头(例如手机前置摄像头),一种是environment,用于调用环境摄像头(例如手机后置摄像头)。 当accept=”audio&... »

Html5 canvas画图白板踩坑

最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了。 主要是记录一下自己菜到像傻子一样的技术。 1、canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大。 2、图片上传!白板涂鸦的内容是以base64的形式传给后端工程师的,图片上传的图片是路径,后端要求统一格式,所以需要把路径转为base64。 3、算是谷歌的限制,前端发起请求后端可以收到,也给了返回值,但... »

Html5页面获取微信公众号的openid的方法

1、H5页面是运行在微信浏览器的 2、需要与公众号关联(即需要openid) 3、判断需求是否需要弹窗告知用户授权操作 4、获取地址栏参数判断是否有’code’,有的话直接传给后台换取openid,没有就跳转微信提供的获取code的链接 5、获取到的openid做本地存储,判断没有openid进行获取openid操作 6、这边的操作是不需要弹出授权框,且code不能重复使用... »

HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题

需求催动此篇博客的诞生 项目背景 之前也没写过小程序但是看过之后都是现成的api 简单易懂 唯一就是会有很多坑要去踩 以为要写原生小程序 但是 是我想多了 公司是要节约开发成本 那么就衍生了H5嵌入小程序这个操作 必须的 1、要去申请一个小程序测试号要配置域名用 2、然后准备一套自己写的项目 测试用 代码部分 index.wxml文件 <web-view src="{{url}}#... »

钉钉企业内部H5微应用开发详解

企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权。 JSAPI鉴权开发步骤: 1、创建H5微应用 登入钉钉开放平台(https://open-dev.dingtalk.com/),进入“应用开发”->企业内部开发H5微应用->创建应用,并填写基本信息和配置开发信息 2、JSAPI鉴权服务端API的开发: (... »

HTML5实现直播间评论滚动效果的代码

直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒,点击滚动到底部。 2.具体代码 <template> <div class="comment"> <div class="comment-wrap" ref="wrapper"> <ul class="list&... »

html5 横向滑动导航栏的方法示例

最近在学习html5,今天看到了一个效果感觉不错,就分享给大家,也给自己留个笔记,具体如下 需要效果 1、首先引入scroll.js 2、html部分 <!-- 科目导航 --> <div id="navBox" class="navMain"> <ul class="nav" style="pos... »

html5拖拽应用记录及注意点

下面通过代码给大家介绍html5拖拽应用记录,具体代码如下所示: e.dataTransfer.setData("a","设置的值"); e.dataTransfer.getData("a"); function drop(e) { <!--尝试console.log(e),这里能拿到好多你用得到的api--> e.dataT... »

HTML5触摸事件(touchstart、touchmove和touchend)的实现

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信... »

recorder.js 基于Html5录音功能的实现

recorder.jsmicrophone基于HTML5的录音功能,输出格式为mp3文件。前言完全依赖H5原生API所涉及的API:WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL兼容性 Chrome、FF、Edge、QQ、360(注:目前IE和Safari全版本不兼容) 其中Chrome47 »

HTML5 Blob对象的具体使用

写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景。 Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。 一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob,继承了Blob的功能,并且扩展支持了... »

HTML5页面无缝闪开的问题及解决方案

对于大型应用而言,庞大的 js 初始化解析和执行会耗费巨大的时间。对于我们的应用特征而言,页面切换实际上是仅仅内容数据的变化,比如切换一篇文档,其 html 容器及样式都是同一套,而差异仅仅只是在数据上,重新载入 html 及初始化 js 这部分耗时完全可以避免掉。让 webview 组件及其容器内的 html 页面常驻,在文档切换的过程,仅仅对数据进行替换,这即是容器化方案。 »

HTML5+CSS设置浮动却没有动反而在中间且错行的问题

查看源码则显示的为0或者很小的数,就是不是自己设置的数。总结到此这篇关于HTML5+CSS设置浮动却没有动反而在中间且错行的文章就介绍到这了,更多相关html css设置浮动内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

详解如何获取localStorage最大存储大小的方法

localStorage,sessionStorage,cookie的简单介绍localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器也会一直存在。亲测Chrome浏览器中localStorage最大5120kb,即5M。到此这篇关于详解如何获取localStorage最大存储大小的方法的文章就介绍到这了,更多相关localStorage... »

Html5导航栏吸顶方案原理与对比实现

一. 什么是吸顶? 吸顶效果是web开发中一种常见的交互方式,常见的应用场景有导航、搜索框等等。能够做流量的横向分发,瞩目的吸顶效果和横滑切tab的手势,能够让用户快速发现更多商品。 市场上享有H5导航栏吸顶效果展示 1.淘宝聚划算吸顶演示: 2.淘宝百亿补贴吸顶演示:   二. 常见的tabbar吸顶方案 基于position粘性定位的吸顶方案 基于JS监听scroll事件的吸顶方案 ... »

html5中嵌入视频自动播放的问题解决

在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法,记录一下。核心是监听了canplaythrough事件,然后自己去让视频play()。 在这个过程中还发现,ios和安卓不一样,安卓上需要设置muted才能自动播放,ios没这个限制,当然,多媒体播放... »

html5的pushstate以及监听浏览器返回事件的实现

pushstate与监听浏览器返回解决的问题 1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。 因此可以使用pushstate方法,不刷新浏览器改变url 当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮,进而控制组件的... »

浅析图片上传及canvas压缩的流程

我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 »

HTML5 FileReader对象的具体使用方法

写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。 FileReader FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数... »

html5用video标签流式加载的实现

video标签浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频。这个过程是浏览器来加载video的。使用我们通过 URL.createObjectURL来创建一个blob格式的视频文件,来给video标签播。生成这样的一个video标签。播放器原理它是利用了流式处理视频源,不仅仅是简单的请求\b流然后\b交给\bvideo标签播放,它是请求视频流然后用... »

原生canvas制作画图小工具的踩坑和爬坑

最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样  写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。 坑1,绘制过程的预览 用canvas画线没什么问题,moveTo和lineTo就好了,来一段代码凑字数(:joy:) 鼠标按下,开始绘制,记录初始鼠标的位置 startPaint = (e)=&... »

video.js支持m3u8格式直播的实现示例

为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题,还可以有各种视频状态接口暴露,优化体验 核心代码: <!DOCTYPE html> <html> <head> <title&... »

h5移动端调用支付宝、微信支付的实现

公司项目之前已有支付宝支付,现要求增加微信支付,第一次做,摸着石头过河!结果是满意的。 废话就不说了直接上代码: var aliChannel = null; var wxChannel = null; // 定义支付方式切换 var state_type = 1; // 选择支付方式 默认为支付宝样式 $(".zfb").find("i").css(&qu... »

Page 1 of 61123»