多媒体

  video:是行内块(text-align: center; 对行内块适用)

  <figure></figure>: 多媒体标签 ;

  <figcaption></figcaption>: 多媒体标题

方法: load() 加载、play()播放、pause()暂停

属性: currentTime 视频播放的当前进度、

    duration:视频的总时间、

    paused:视频播放的状态

事件:   oncanplay:事件在用户可以开始播放视频/音频(audio/video)时触发

            video.oncanplay = funciton() { } ;

    ontimeupdate: 通过该事件来报告当前的播放进度、

            video.ontimeupdate = function() { };

    onended: 播放完时触发

全屏: video.webkitRequestFullScreen() ;

关闭全屏:        video.cancleFullscreen() ;   注意大写

// 全屏兼容写法
if(box.requestFullscreen){
box.requestFullscreen();
}else if(box.webkitRequestFullScreen){
box.webkitRequestFullScreen();
}else if(box.mozRequestFullScreen){
box.mozRequestFullScreen() ;
}

通过document.fullScreen 检测当前是否是处于全屏、不同浏览器需加前缀

案例:

  a)基本样式,进度条、播放按钮、当前时间/总时间、全屏

  b)设置播放暂停事件,修改按钮

  c)获取总时间。当前时间,同步时间

  d)进度条同步播放,当前时间/总时间

  e)全屏事件

  f)点击位置播放点击出视频

  g)缓冲进度条

    

var extend = document.querySelector('.extend');  // 绑定全屏按钮
extend.onclick = function(){            // 点击后全屏
video.webkitRequestFullScreen();
}

获取盒子的绝对定位坐标

  

var odiv=document.getElementById('divid');

alert(odiv.getBoundingClientRect().left);

alert(odiv.getBoundingClientRect().top);
 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: ;
padding: ;
} figcaption{
text-align: center;
font-size:24px;
font-family: "Microsoft Yahei";
} .player{
width: 720px;
height: 360px;
margin:100px auto;
/*background-color: #000;*/
background: url(images/loading.gif) no-repeat # center;
background-size:auto %;
position: relative;
} video{
/*display: none;*/
height:%;
display: block;
margin:0px auto;
/*display: none;*/
} .controls{
position: absolute;
width: 700px;
height: 40px;
background-color: rgba(,,,0.3);
left:10px;
bottom:10px;
border-radius: 5px; } .switch{
position: absolute;
left:10px;
top:10px;
width: 20px;
height: 20px;
font-size:18px;
text-align: center;
line-height: 20px;
color:yellow;
cursor: pointer;
} .progress{
width: 432px;
height: 10px;
background-color: rgba(,,,0.3);
position: absolute;
left:50px;
top:15px;
border-radius: 4px;
overflow: hidden;
} .curr-progress{ height:%;
background-color: #ffffff;
width: %;
} .time{
position: absolute;
width: 120px;
height: 20px; left:505px;
top:10px;
font-size:12px;
color:#fff;
text-align: center;
line-height: 20px;
} .extend{
position: absolute;
right:20px;
top:10px;
width: 20px;
height: 20px;
font-size:18px;
cursor: pointer;
text-align: center;
line-height: 20px;
color:yellow;
}
</style>
</head>
<body>
<!-- 媒体标签-->
<figure>
<figcaption>视频案例</figcaption>
<div class="player">
<video src="video/fun.mp4"></video>
<!-- 控制条-->
<div class="controls ">
<!-- 开关-->
<span class="switch icon-play"></span>
<!-- 进度条-->
<div class="progress">
<div class="curr-progress"></div>
</div>
<!-- 时间-->
<div class="time">
<span class="curr-time">::</span>/<span class="total-time">::</span>
</div>
<!-- 全屏-->
<span class="extend icon-resize-full"></span>
</div>
</div>
</figure> <script>
//获取需要的标签
var video=document.querySelector('video'); var playBtn=document.querySelector('.switch'); var currProgress=document.querySelector('.curr-progress'); var currTime=document.querySelector('.curr-time'); var totaltime=document.querySelector('.total-time'); var extend=document.querySelector('.extend'); var progress=document.querySelector('.progress');
var controls =document.querySelector('.controls');
var player=document.querySelector('.player'); var Ttime=;
// 首先: 通过点击 实现 视频的暂停/播放 改变按钮的样式
// 然后: 获取视频的总时长,放到totalTime中
// 然后: 当视频播放的时候, 动态谁知crrTime的值,并且改变进度条的样式
// 最后: 实现全屏效果 playBtn.onclick=function(){
if(video.paused){
video.play();
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
video.pause();
this.classList.remove('icon-pause');
this.classList.add('icon-play');
}
} video.oncanplay=function(){ // 获取视频的总时长
Ttime=video.duration; // 转换成十分秒的格式
var h=Math.floor(Ttime/); var m=Math.floor(Ttime%/); var s=Math.floor(Ttime%); h=h>?h:''+h;
m=m>?m:''+m;
s=s>?s:''+s; totaltime.innerHTML=h+':'+m+':'+s;
} video.ontimeupdate=function(){ var Ctime=video.currentTime; //转换成十分秒的格式
var h=Math.floor(Ctime/); var m=Math.floor(Ctime%/); var s=Math.floor(Ctime%); h=h>?h:''+h;
m=m>?m:''+m;
s=s>?s:''+s; currTime.innerHTML=h+':'+m+':'+s; // 动态改变进度条
var value=Ctime/Ttime; currProgress.style.width=value*+"%"; } //全屏
extend.onclick=function(){
video.webkitRequestFullScreen();
} // 点击定位视频的进度
progress.onclick = function (event) {
event = event || window.event; // 鼠标的坐标
// 获取进度条的左上角的坐标
var pagex = event.pageX || event.clientX + document.documentElement.scrollLeft;
//获取进度条的宽度
var value= pagex-player.offsetLeft-controls.offsetLeft-progress.offsetLeft ;
var value2 = pagex - currProgress.getBoundingClientRect().left;
console.log(value+"------"+value2); currProgress.style.width = value +"px";
// 定位视频的进度
video.currentTime = video.duration* value/progress.offsetWidth ; // console.log(player.offsetLeft);
// console.log(controls.offsetLeft);
// console.log(progress.offsetLeft);
// console.log(currProgress.offsetLeft); // console.log(progress.offsetWidth);
console.log("视频的长度"+video.duration);
console.log("当前鼠标坐标:"+pagex);
console.log("当前鼠标坐标:"+event.clientX);
console.log("进度条的宽度:"+currProgress.clientWidth);
console.log("进度条的左上角坐标:"+currProgress.getBoundingClientRect().left);
console.log("被卷去的头部"+document.documentElement.scrollLeft);
} </script>
</body>
</html>

多媒体

http://mingm.cn/demo/09-HTML+CSS3/27-HTML-第二天/code/01-多媒体/02-自定义多媒体控制条.html

cn若不成功则更换为top即可

拖拽

  为元素添加 draggable="true";来设置此元素是否可以进行拖拽操作,图片和链接 默认时开启的。

拖拽元素: 设置了draggable = 'true'属性的元素

目标元素: 页面中任何一个元素都可以成为目标元素

事件监听:

拖拽元素:

ondrag:    应用于拖拽元素,整个拖拽过程都会调用。box.ondrag=function(){  console.log('拖拽正在进行') } ;

ondragstart: 应用与拖拽元素,当拖拽开始时调用

ondragleave:应用于拖拽元素,当鼠标离开拖拽元素时调用

ondragend:  应用于拖拽元素,当拖拽结束时调用

目标元素:

ondragenter: 应用于目标元素,当拖拽元素进入时调用

ondragover: 当停留在目标元素上时调用

ondrop:     当在目标元素上松开鼠标时调用

ondragleave:   当鼠标离开目标元素时调用

阻止拖拽事件的默认行为:

div.ondragover = function( event ){
event.preventDefault();          // 阻止拖拽事件的默认行为
console.log ( 'over...' ) ;
}

历史     

   window.history 对象可以管理历史记录,可用于单页面应用,

  Single Page Application 可以无刷新改变网页内容

旧版本浏览器

  history.back()  回退

  history.forward()  前进

Web存储

  传统方式: document.cookie ;传统方式, 4k大小 。解析复杂/存储数据量小

  storage存储:

   a)window.sessionStorage。(会话存储,容量5M)

      1. 生命周期为关闭浏览器窗口

      2. 在同一个窗口下数据可以共享

   b)window.localStorage (本地存储,容量20M)

      1. 永久生效,除非手动删除

      2. 可以多窗口共享

     c)设置、读取方便

   d)只能存储字符串,可以将对象json.stringify() ,编码后存储

   e)可能存储在浏览器内存和硬盘上

方法:

  a) window.sessionStorage  关闭窗口数据销毁

    1. window.sessiionStorage.setItem( key, value)

      设置存储内容/再次给同一个key负值,将覆盖之前数据

    2. window.sessionStorage.getItem(key) 获取存储数据

    3. window.sessionStorage.removeItem(key) 删除key

    4. window.sessionStorage.clear() 清除所有数据

 b)window.localStorage 数据存储在硬盘上 永久存储

    1. window.localStorage.setItem( key,value )

      设置存储内容/再次给同一个key赋值,将覆盖之前数据

    2. window.localStorage.getItem( key ) 获取存储数据

    3. window.localStorage.removeItem( key ) 删除key

    4. window.localStorage.clear(). 清除所有数据

打开网页自动获取数据:

window.onload=function(){

userName.value=window.localStorage.getItem('userName');
pwd.value=window.localStorage.getItem('pwd');
}

应用程序缓存

  

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源,提升访问速度,增强用户体验

4、减少请求,缓解服务器负担

一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型

AddType text/cache-manifest .appcache

  例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性

  <html manifest="demo.appcache" > 路径要保证正确。

manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等

3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)

CACHE MANIFEST

#注释开头用#

CACHE:
#要缓存的文件 NETWORK
#指定必须联网才能缓存的文件 FALLBACK
#当前页面无法访问时,返回的一个页面
  one.css two.css    #会缓存two.css 当找不到one.css 会去找two.css 文件.

地理定位

  1. 获取用户地理信息
  2. 可以开发基于用户位置的互联网应用
  3. 基于位置服务Location Base Service
  4. 定位方式

a)  IP可以一般精确到城市,运算代价大

b)  GPS 非常精确

c)  BeiDoui(BDS)

d)  wifi信号:室内

e)  手机信号

f)  用户自定义数据(用户自己输入自己位置)

    1. 浏览器会自动以最优化方式获取用户地理信息
    2. navigator.geolocation.getCurrentPosition(successCallback,errorCallback) 调用成功则调用seccessCallback函数  
    3. var wd = position.coords.latitude; //纬度
      var js = position.coords.longitude;//经度
if(navigator.geolocation){
如果支持,获取用户地理信息 // successCallback 当获取用户位置成功的回调函数
// errorCallback 当获取用户位置失败的回调函数 navigator.geolocation.getCurrentPosition(successCallback,errorCallback); }else{
console.log('sorry,你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position){获取用户当前的经纬度
// coords坐标
// 纬度latitude
var wd=position.coords.latitude;
// 经度longitude
var jd=position.coords.longitude; console.log("获取用户位置成功!");
console.log(wd+'----------------'+jd);
}
// 获取地理位置失败的回调函数
function errorCallback(error){
console.log(error);
console.log('获取用户位置失败!')
}

可使用百度地图api

网络状态

我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值

window.online用户网络连接时被调用

window.offline用户网络断开时被调用

  1. window.addEventListener(‘online’,function(){})用户网络链接时被调用(on和其他事件的on不同,这里代表打开)
  2. window.addEventListener(‘offline’,function(){})用户网络断开的时候调用

a)  拔掉网线或者禁用以太网

  1. window.addEventListener(‘事件(不带on)’)

1.1   Font Awesome 字体框架

http://fontawesome.dashgame.com/

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果

  

HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态的更多相关文章

  1. 从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Duilib的控件拖拽排序,支持跨容器拖拽(网易云信版本)

    完整代码见:https://github.com/netease-im/NIM_Duilib_Framework/pull/151 核心代码(思路): appitem.h #pragma once # ...

  3. winform 控件拖拽和缩放

    核心类: using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using ...

  4. duilib中控件拖拽功能的实现方法(附源码)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...

  5. 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  6. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. HTML5深入学习之鼠标跟随,拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  8. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  9. C#中combobox 控件属性、事件、方法

    一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...

随机推荐

  1. Android 学习笔记之Volley(七)实现Json数据加载和解析...

    学习内容: 1.使用Volley实现异步加载Json数据...   Volley的第二大请求就是通过发送请求异步实现Json数据信息的加载,加载Json数据有两种方式,一种是通过获取Json对象,然后 ...

  2. CUDA学习笔记(三)——CUDA内存

    转自:http://blog.sina.com.cn/s/blog_48b9e1f90100fm5f.html 结合lec07_intro_cuda.pptx学习 内存类型 CGMA: Compute ...

  3. leetcode 124. Binary Tree Maximum Path Sum ----- java

    Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...

  4. Force IE to Open Link in New Tab

    1.First, open Internet Explorer and click on Tools and then Internet Options. 2.Now click on the Set ...

  5. POJ3111 K Best(另类背包+二分+变态精度)

    POJ3111 K Best,看讨论区说数据有点变态,精度要求较高,我就直接把循环写成了100次,6100ms过,(试了一下30,40都会wa,50是4000ms) 第一次在POJ上看到下面这种东西还 ...

  6. 关于ajax发送的数据问题

    今天在做保存富文本编辑器的内容时,发送了一个ajax请求: $.ajax({ type:"POST", url:"{% url 'cms:add' %}", d ...

  7. java中path和CLASSPATH的配置和意义解析

    原文链接 https://blog.csdn.net/eclipse_yin/article/details/51447169 一.JDK的安装和基本配置 JDK的安装: 1) 如果想要获得JDK,那 ...

  8. JS去掉字符串前后空格或去掉所有空格的用法

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  9. ELK学习笔记之ELK架构与介绍

    0x00 为什么用到ELK 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太 ...

  10. Vcenter一次性将服务器四个网卡从端口组迁移到分布式交换机的方法

    如果你的服务器已经在清单列表里了,那么可以先从分布式交换机将这台服务器删除,然后再添加一次.这个时候的添加就可以选择四个网卡(包括端口组,包括管理端口组),一次性加入分布式交换机