opera | 易学教程

HTML5 向网页嵌入视频和音频

阅读更多关于 HTML5 向网页嵌入视频和音频

现在很多网站上都会使用到视频和音频，HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签，而嵌入音频可以使用 <audio> 标签。这两个标签都是 HTML 5 中新增的标签，两个标签中的属性和方法也很类似，但也有些不同。其中 audio 元素用于定义声音，比如音乐， video 元素用于定义视频，如电影等。向网页中嵌入视频 <video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。示例：首先我们准备一个视频，例如一个 test.mp4 ，然后使用 <video> 标签嵌入视频，如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <video src="./test.mp4" controls="controls" width="700px" height="400px"></video> </body> </html> 在浏览器中的预览效果：从上图中可以看到，我们通过 <video> 标签成功向网页中插入了一个视频，其中 src

至联云讲解《IPFS 0.5版本改进较大，已出现系统级支持》

阅读更多关于至联云讲解《IPFS 0.5版本改进较大，已出现系统级支持》

协议实验室于5月7～8日举办了 IPFS Pinning Submit。由于疫情原因，这次会议是线上举行。今日得闲，看了几个视频。IPFS 0.5.0版本发布，进展很大，本文做一个简单梳理。主要内容来自IPFS Project Lead - Molly Mackinlay。 IPFS 生态日渐完善 IPFS生态近期有比较大的发展，从内容分享、社交网络、身份服务、区块链应用、金融电子化等等各个方面。非常重要的是，目前有比较多的浏览器开始支持IPFS，包括Firefox、Chrome、Brave、Opera 等。有一些系统级的支持也出现了，前看上图的左上角。 IPFS 0.5 改进巨大 IPFS 0.5 版是IPFS 到目前为止最大的一次更新。这次更新主要在IPFS的效率、安全和更具弹性方面得到巨大提升。效率的提升是全方位的，主要指标包括： 2倍存储速度提升：现在IPFS存储文件的速度是普通文件系统的2.5倍速度 2.5倍广播速度提升：一千个节点测试中表现出很好的提供服务的速度 2到5倍的内容获取速度提升：当从多个节点同时下载内容速度提升更为明显 2到6倍的内容查询速度提升：不仅仅是更快，也更稳定可靠上面这个部分讲的是直接提供服务。由于IPFS网络是一张大网，很多数据需要从其他节点获取，这就涉及到内容路由的问题，也就是说需要经过多步才能到达客户。内容路由的速度在0

小白入门之DOM笔记知识点详解

阅读更多关于小白入门之DOM笔记知识点详解

小白入门之DOM笔记知识点详解 window对象窗口大小系统对话框 location对象 navigator对象浏览器的版本信息（了解） navigator.userAgent navigator.appName navigator.appVersion navigator.platform screen对象窗口位置 history对象小结什么是DOM？ BOM（Browser Object Model）：浏览器对象模型其实就是操作浏览器的一些能力我们可以操作哪些内容 1、获取一些浏览器的相关信息（窗口的大小） 2、操作浏览器进行页面跳转 3、获取当前浏览器地址栏的信息 4、操作浏览器的滚动条 5、浏览器的信息（浏览器的版本） 6、让浏览器出现一个弹出框（alert/confirm/prompt） 7、BOM 的核心就是 window 对象 8、window 是浏览器内置的一个对象，里面包含着操作浏览器的方法 window对象窗口大小 IE、Safari、Opera、和Chrome都提供了innerHeight 和innerWidth属性，分别用于表示窗口相对与屏幕左边和上边的位置信息，这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的） var windowHeight = window . innerHeight console . log (

PHP判断客户端浏览器类型

阅读更多关于 PHP判断客户端浏览器类型

代码如下 <?php /** * 判断浏览器名称和版本 */ function get_user_browser () { if ( empty ($_SERVER[ 'HTTP_USER_AGENT' ])) { return 'error!' ; } if ((strpos($_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) == false ) && (strpos($_SERVER[ 'HTTP_USER_AGENT' ], 'Trident' ) !== FALSE )) { return 'Internet Explorer 11.0' ; } if (strpos($_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE 10.0' ) != false ) { return 'Internet Explorer 10.0' ; } if (strpos($_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE 9.0' ) != false ) { return 'Internet Explorer 9.0' ; } if (strpos($_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE 8.0' ) != false ) { return 'Internet Explorer 8

WEB前端第十三课——浏览器内核、位置

阅读更多关于 WEB前端第十三课——浏览器内核、位置

1.浏览器内核及前缀　　在CSS中新的属性标准尚未明确的情况下，各浏览器厂商对新属性的支持情况也不相同，这个阶段会对属性加厂商前缀进行区分。　　根据不同的浏览器内核，CSS前缀有所不同，最基本的浏览器内核有四种，其他内核都是基于此四种进行再研发的。　　① Gecko内核，前缀为“-moz-”，火狐浏览器　　② Webkit内核，前缀是“-webkit-”，也叫谷歌内核，Chrome浏览器最先开发使用，Safari浏览器也使用该内核　　　　　　　　　目前，国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等　　③ Trident内核，前缀为“-ms-”，也称 IE内核　　④ Presto内核，前缀是“-o-”，目前只有Opera使用　　代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS浏览器内核</title> <style> div { width: 500px; height: 500px; background-color:orange; border: 36px solid rgba(255,255,255,0.5); margin: 60px auto; padding: 50px; font-size: 200px; font

评估浏览器级别，提醒升级

阅读更多关于评估浏览器级别，提醒升级

是时候拒绝一些老旧的浏览器了，诱导你的用户升级浏览器吧 = =! 这张网页以IE 各本版本为参照粗略地评估访客的浏览器等级，提醒低于IE8 级别(没办法，XP不支持IE9)的浏览器用户更换浏览器。 <! DOCTYPE html > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < meta http-equiv ="X-UA-Compatible" content ="Edge" />   < link rel ="stylesheet" href ="http://files.cnblogs.com/ecalf/duolaAmeng.css" /> </ head > < body > < style > .nomoreie { width : 550px ; display: none; clear : both ; position : relative ; left : -260px ; margin-left : 50% ; margin-top :

企业如何选择合适的SSL证书

阅读更多关于企业如何选择合适的SSL证书

随着互联网的普及，互联网应用层出不穷，同时，由于互联网的爆炸性增长，接入互联网的节点不计其数，新的发展带来了机遇同时也带来了隐患。安全高效的互联网环境对于客户的信心保障远胜过铺天盖地的广告宣传。SSL部署的过程中决定购买何种SSL网站安全证书，不仅是一个技术问题，更涉及到公司的战略、服务意识、管理等一系列问题。在一系列SSL服务商面前，企业又该如何抉择呢? 选择之前您要考虑是否需要保护多个域名。例如，如果你在一台服务器上部署多个不同域名的站点，建议购买SSL多域名证书；其次一个主域名下的多个子域，都需要证书来保护信息传输安全，你应该选择通配符证书，保护的二级子域名数量没有限制；假如需求复杂，在各个场景中都有使用的需求，还可以选择万能型SSL证书（多域名通配符证书），这些在安信证书都可以申请。对线上购物者来说，绿色地址栏是验证网站身份及安全性的最简便可靠的方式。在包括火狐，谷歌，opera在内的新一代浏览器下，使用扩展验证(EV)SSL证书的网站的浏览器地址栏会呈现绿色，从而清晰明确地告诉用户正在访问的网站是经过严格认证的。此外绿色地址栏临近的区域还会显示网站所有者的名称和颁发证书CA机构名称。这所有的一切，均向客户传递同一信息，该网站身份可信，信息传递安全可靠，而非钓鱼网站。当下国内互联网环境复杂，部署SSL证书实现https加密的网站可以有效防止站点破坏、数据篡改

web前端 javascript 兼容低版本 IE 6 7 8复合写法

阅读更多关于 web前端 javascript 兼容低版本 IE 6 7 8复合写法

1. 返回检测屏幕宽度 ( 可视区域 ) 1 function client() { 2 if (window.innerWidth != null ) // ie9 + 最新浏览器 3 { 4 return { 5 width: window.innerWidth, 6 height: window.innerHeight 7 } 8 } 9 else if (document.compatMode === "CSS1Compat") // 标准浏览器 10 { 11 return { 12 width: document.documentElement.clientWidth, 13 height: document.documentElement.clientHeight 14 } 15 } 16 return { // 怪异浏览器 17 width: document.body.clientWidth, 18 height: document.body.clientHeight 19 } 20 } 2. 阻止冒泡 w3c 的方法是 event.stopPropagation() proPagation 传播传递 IE 则是使用 event.cancelBubble = true bubble 冒泡泡泡 cancel 取消兼容的写法： JQuery 阻止时间冒泡

Canvas干货总结

阅读更多关于 Canvas干货总结

一、canvas简介　　<canvas> 是 html5 新增的，一个可以使用脚本(通常为 javascript) 在其中绘制图像的 html 元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己 macos x webkit 推出，供应用程序使用像仪表盘的构件和 safari 浏览器使用。后来，有人通过 gecko 内核的浏览器 (尤其是 mozilla和firefox)，opera 和 chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。　　canvas 是由 html 代码配合高度和宽度属性而定义出的可绘制区域。javascript 代码可以访问该区域，类似于其他通用的二维 api，通过一套完整的绘图函数来动态生成图形。 mozilla 程序从 gecko 1.8 (firefox 1.5) 开始支持 <canvas>, internet explorer 从 ie9 开始 <canvas> 。chrome 和 opera 9+ 也支持 <canvas>。二、canvas的基本组成　　<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。如果不给 <canvas> 设置 widht

谈谈我们知识体系（js篇）

阅读更多关于谈谈我们知识体系（js篇）

前言我是小白，励志要做技术男神的帅逼，目前住在南京，做了快3年前端工程师，会继续写笔记的。 js string对象的一些常用方法普通方法 charAt() 方法返回字符串中指定位置的字符。 split // 通过把字符串分割成子字符串来把一个 String 对象分割成一个字符串数组。 slice // 提取字符串中的一部分，并返回这个新的字符串，获取索引号为1，2，3的字符串，即[1, 4) substr(start, length) // 方法返回字符串中从指定位置开始到指定长度的子字符串 substring(start, end) // 返回字符串两个索引之间（或到字符串末尾）的子串。 trim() // 删除一个字符串两端的空白字符 toLowerCase() // 将调用该方法的字符串值转为小写形式，并返回。 toUpperCase() // 将字符串转换成大写并返回。正则方法 search // 执行一个查找，看该字符串对象与一个正则表达式是否匹配。 replace // 被用来在正则表达式和字符串直接比较，然后用新的子串来替换被匹配的子串。 match // 当字符串匹配到正则表达式（regular expression）时，match() 方法会提取匹配项。 Array对象的一些常用方法不改变原数组的方法 concat() // 连接两个或多个数组

订阅 opera