您现在的位置是:首页 > 正文

html5 学习之路 一(视频、音频、拖放)

2024-04-01 00:55:21阅读 1

html5 基本概念:

为 HTML5 建立的一些规则:

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求(比如 Flash)
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

二、视频、音频(audio)
例子:
<video src="movie.ogg" width="320" height="240" controls="controls">
  Your browser does not support the video tag.
</video>
支持多个source 主要适配浏览器,将播放第一个适合的source
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

三、video 方法  属性 事件

例子:

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center;">
  <button οnclick="playPause()">播放/暂停</button> 
  <button οnclick="makeBig()">大</button>
  <button οnclick="makeNormal()">中</button>
  <button οnclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 
<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()

if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 


function makeBig()

myVideo.width=560; 



function makeSmall()

myVideo.width=320; 


function makeNormal()

myVideo.width=420; 

</script> 
</body> 
</html>


方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error

duration timeupdate

ended ended

error abort

paused empty

muted emptied

seeking waiting

volume loadedmetadata

height

width

四、拖放:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{

//允许拖放
ev.preventDefault();
}
function drag(ev)
{

//类似数据传输,就是将被拖放的元素数据信息传过去
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));   //获取被拖放元素信息,再做处理
}
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
  <img src="/i/w3school_logo_black.gif" draggable="true" οndragstart="drag(event)"id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>


网站文章

  • python面向对象

    面向对象属性查找1.先从对象的名称空间找2.再从对象类的类变量找3.在找父类的类变量先对象本身-->类-->父类-->父类的父类-->object-->自己定制的元类-->typeclass people(): v_id=0 def __init__(self,name): self.name=namec...

    2024-04-01 00:55:15
  • easyheap

    easyheap

    首先,检查一下程序的保护机制,发现没开PIE,且got表可写然后,我们用IDA分析一下,发现没有show功能出现了很多sub_4008F1()函数我们一个个点开看一下,发现最后一个是创建,为了便于分析我们可以改成add(n)可以看出创建节点功能里,存在ptr[i]堆内容未初始化的漏洞经过分析,节点的结构体如下struct Obj{ char *Data; int Size...

    2024-04-01 00:55:06
  • 障碍物决策横纵向标签

    决策

    2024-04-01 00:55:00
  • SFP光纤笼子 别称 作用 性能要点 工程要素

    SFP光纤笼子 别称 作用 性能要点 工程要素

    2023年,Hqst盈盛电子于下属五金部开发生产SFP光纤连接器笼子等系列产品,所有产品生产及性标准都将参照连接器产品常用测试标准EIA-364-C等标准,以下为我司常规SFP光纤连接器基本性能要求。...

    2024-04-01 00:54:35
  • MySQL之深入InnoDB存储引擎——Buffer Pool

    MySQL之深入InnoDB存储引擎——Buffer Pool

    以这个算法为核心,InnoDB维护了一个LRU链表,如果页不在Buffer Pool中,在把该页从磁盘加载到Buffer Pool的时候,就把该缓冲页对应的控制块作为节点添加到LRU链表的头部,如果使...

    2024-04-01 00:54:27
  • 攻防世界Web新手区题解(超详细)

    攻防世界Web新手区题解(超详细)

    Web新手区题解

    2024-04-01 00:54:20
  • python读取和保存json文件

    json文件是一种常见的数据存储文件,比txt看着高级点,比xml看着人性化一点。 同时,json作为一种通用协议的文件格式,可以被各种语言方便地读取。所以,json非常适合用来存储结构化的数据。 json的具体介绍和使用规范:https://www.json.org/json-en.html 本文将关于python读取json做一个小小的记录和总结。 1. 读取json 一般情况下的j...

    2024-04-01 00:53:52
  • 求教:MyBatis的缓存到底有用吗?

    前言:今天看了下mybatis的缓存,发现其实这个缓存基本可以说是没有用的,以下是一些个人观点: 为什么没有用呢? 首先:MyBatis分为一级缓存和二级缓存 一级缓存:存在于SqlSession的生...

    2024-04-01 00:53:40
  • GitHub修改仓库文件

    GitHub修改仓库文件

    GitHub修改仓库文件1.初始化git环境:git init2.创建并修改本地文件(以README文件为例):vi README.md3.添加到暂存区:git add README.md4.保存提交...

    2024-04-01 00:53:31
  • postman接口测试教程和项目实战

    postman接口测试教程和项目实战

    接口指的是实体或者软件提供给外界的一种服务。因为接口能使我们的实体或者软件的内部数据能够被外部进行修改。从而使得内部和外部实现数据交互。所以需要接口。

    2024-04-01 00:53:05