展开菜单

html5视频媒体标签video的使用方法及完整参数说明

video是HTML5的一个视频媒体标签,其作用是在网页中嵌入指定的视频,video标签的代码结构及参数如下。 HTML代码结构: <video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="tr...

jquery判断video视频播放或暂停的代码

javascript paused属性返回视频是否已暂停(该属性为只读属性,IE8或更早的浏览器不支持该属性),javascript play()方法用于播放音频或视频,javascript pause()方法用于暂停当前播放的音频或视频。 只判断视频是否在播放状态 HTML代码: <div class="video"> <video src="../video/video.mp4" controls> 您的浏览器不支持 video 标签。 </video> </div> jQuery代码...

html5 canvas实现背景鼠标连线动态效果代码解析

html5 canvas实现背景鼠标连线动态效果代码解析

很流行的动态背景连线特效。下面的代码是作者在扒下来的代码上进行整理和注释,很适应参考学习。 效果截图: 效果演示:https://jc1144096387.github.io/canvas_nest/ 作者地址:https://blog.csdn.net/u013556477/article/details/82819785 HTML代码(测试代码): <!doctype html> <html lang="en"> <head> <meta charset="U...

解决HTML5标签video视频不能播放,显示无效源的问题

解决HTML5标签video视频不能播放,显示无效源的问题

视频本地播放器可以打开播放,在网页上使用video标签不能播放或显示无效源,原因是视频的编码不被video支持,解决方法是转换视频编码。 当前video标签支持Ogg、MPEG4(mp4)、WebM三种视频格式,分别支持的视频编码如下: Ogg - Theora视频编码、Vorbis音频编码 MPEG4 - H.264视频编码、AAC音频编码 WebM - VP8视频编码、Vorbis音频编码 转换编码可以使用格式工厂等视频、音频转换软件操作,建议选择MP4格式的AVC+AA...

webkit浏览器HTML5 video标签视频自动播放autoplay的问题

出于流量和电量的保护,在移动端video视频必须在用户手势操作下才能触发播放,video的自动播放属性autoplay是无效的(不涉及sdk,如微信之类)。但是在2016年webkit对视频自动播放采用了宽松的策略,这个策略其实是用来解决GIF的问题,用mp4去取代 gif,有统计显示同等效果显示,gif 体积上可能是后者的 8倍,解码耗能是后者的2倍。新的策略在 chrome for android(v53)和 safari for ios(10)以上有效,自动播放必须满足以下条件才有效: <video> 标签必须有 autoplay 的属性。 &l...

SVG定义路径的path标签入门详细教程

SVG的<path>元素用于定义一些复杂的图形。它可以结合使用直线,曲线等来制作各种不规则的图形。<path>元素是SVG基本图形中最为复杂的一个。要掌握和理解它也需要下一点苦工。 先来看一个例子: <svg xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,110 L100,0" style="stroke:#660000; fill:none;"/> </svg> ...

使用JS和canvas实现gif动图的停止和播放

使用JS和canvas实现gif动图的停止和播放

HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。 HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn" value="停止"></p> JS代码: if ('getContext' in document.createEl...

通过HTML5 Canvas实现360度全景图

很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买者来说是一个很好的消费体验,用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理: 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。 照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。 JAVASCRIPT中预加载所有照片,可以配合进度条显示加载精度 创建/获取Canvas对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不 同帧。大致的原理就是这样,比较简...

HTML5实现网页图片鼠标悬停黑白变换效果

使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。 贡献者:感谢达西·克拉克 贡献jQuery和Javascript代码。 效果演示:http://webdesignerwall.com/demo/html5-grayscale/ 目的 这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效,因为灰...

响应式HTML5模板制作教程

响应式HTML5模板制作教程

HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时,目前基于响应式的网页设计理念也得到了广泛的认同,开发者在开发基于HTML 5的网页时,如果能创建响应式的页面,则会增色不少,特别是能适配各类移动终端。在本文中,读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。 创建良好的HTML 5模版的特征有: 新的特性应该只是基于HTML、CSS、DOM和Javscript ...

jquery+HTML5响应式导航菜单设计教程

jquery+HTML5响应式导航菜单设计教程

通过jquery+html5实现,当浏览器窗口缩小或者手机访问的时候,导航菜单变成按钮下拉式菜单。效果图: HTML代码: <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> jQuery代码: ...