跟KingDZ学HTML5之二 再见Audio和Video

呵呵,大家别见怪啊,这篇文章可不是和这两个标签 说BYE-BYE  而是,进一步的 运用这两个标签。

好了,我们这节课一开始,第一个例子,用JS控制  这两个标签,哦,对了,我之讲解一个了,这两个哥们的功能太像了,其他的大伙自己去理解吧。

<! DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function Show() {
            var video = document.createElement(‘video‘);
            video.src = ‘c:/text/1.mp4‘;
            video.controls = true;
            document.body.appendChild(video);
        }
    </script>
</head>
<body>
    <input type="button" value="显示视频" onclick="Show();"/>
<body>
</html>
这个就是我们用脚本去创建一个  video 对象了,呵呵。

好了,我们当然也可以这么着写的

<! doctype html>
<html>
<body>
     <video controls="true" width="320" height="240">不支持这个标签</video>
     <input type="button"  value="加载视频" onclick="document.getElementsByTagName(‘video‘)[0].src=‘c:/text/1.mp4‘"/>
<body>
</html>

好了,呵呵,这个是不是可以写成,动态加载自己的视频文件呢?

HTML5开发的代码的  格式更加的 多样化,你可以

用下面的三种格式去 写HTML5的代码。

<video loop>
<video loop="">
<video loop="loop">
 
上面的三种代码都是正确的。

当然,你也可以自己给video 标签,写出来自己的 开始和结束

<! doctype html>
<html>
<head>
</head>
<body>
     <video controls="true" width="320" height="240">不支持这个标签</video>
     <input type="button"  value="加载视频" onclick="document.getElementsByTagName(‘video‘)[0].src=‘c:/text/1.mp4‘"/>
     <input type="button" value="播放" onclick="document.getElementsByTagName(‘video‘)[0].play()" />
     <input type="button" value="暂停" onclick="document.getElementsByTagName(‘video‘)[0].pause()" />
<body>
</html>
当然你也可以做一个滚动条效果。【自己的滚动条哦】  
  <input type="range" step="any" id="seekbar"/>

在这里,我就不给大家实现了,就是 运用 JS 来控制的。

我们也可以实现 快放  和  慢放。

下面,我给大家慢慢的说一些  我在做 HTML5的实例时间的  觉得很好的东西

首先

<button class="play" title="play">►</button/>

大家看看是什么情况,哈哈

 
然后是

<button class="play" title="play">▐▐</button/>

哈哈。欢迎大家  和我交流   这两个标签的用法,再见啦。

时间: 2024-12-24 19:12:14

跟KingDZ学HTML5之二 再见Audio和Video的相关文章

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form

跟KingDZ学HTML5之九 HTML5新的 Input 种类

好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多  Input 的种类. 1.<input type="search">    查询文本框 2.<input type="number"> 数字文本框 3.<input type="range">     滑动条 4.<input type=

跟KingDZ学HTML5之八 HTML5之Web Save

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵 弄不好,开个专题,也可以.(*^__^*) 嘻嘻--.好了开始我们今天的课程吧. 大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K  ?  真的啊,呵呵,要是工资底薪还可以..哈哈 这节课,俺说的这个和COOKIES 差不多.好了,废话不多说,我们讲课. HTML5 提供了两种在客户端存储数据的新方法: local

跟KingDZ学HTML5之三 画布Canvas

继续更新我们的教程,哈哈,个人觉得 ,这个HTML5 的官方 LOGO  怎么看,怎么像变形金刚. 神马关系~~~~~~~~~~~ <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 目前浏览器对 Canvas 的支持情况如下 IE FF Chrome Safari Opera IPhone Android 版本7.0以上 版本3.0以上 版本3.0以上 版本3.0以上 版本10.0以上 版本1.0以上 版本1.0以上 IE7 和  IE8  需要一个 第三方的

跟KingDZ学HTML5之五 探究Canvas之图像与文字

大家好,这节课咱们继续讲解 canvas 这个标签的一些常见的使用,呵呵,这个标签还是真的挺有用途的. 这节课程首先说明的是 如何才 canvas 中插入图像. canvas 插入图像的步骤:呵呵,又来了. 1.首先当然准备一张图片了. 2.用 drawImage 方法将图像插入到 canvas 中. drawImage 方法 有三种形态的参数可以选择 第一种: 我们先用最简单的方法写一个例子 drawImage(image, x, y) 其中 image 是 image 或者 canvas 对

跟KingDZ学HTML5之十三 HTML5颜色选择器

这节课主要给大家展示两个实例,当然,都是灰常简单的. 首先是第一个效果,颜色选择器,这个效果如下 我想大家,很多人都做过其他版本的这个东东吧,对了,这次就是要在HTML5里面简单的实现一下 首先要做的就是准备工作了 <canvas id="text" width="100" height="100"></canvas> <p>Red: <input type="range" id=&q

跟KingDZ学HTML5之十一 HTML5 Form 表单新元素

新的课程又开始,哈哈,最近的文章更新比较快,希望大家跟上俺的步伐啊,呵呵,但是每当看到阅读量,哎,还真不多,可是俺还要坚持写下去,不知道,大家是不是都没有在研究HTML5呢? 这节课程,讲的是 From 表单 新增加的几个新的元素,他和前面的两节课程 同属于一个范围,只不过长的比较特殊.所以就提炼出来了. 旁白:俺不是前端工程师啊,学习HTML5完全是因为,哈哈,这个东西太酷了.俺是正宗滴NET程序员 好了第一个出现的新元素是 datalist 哈哈,这个好解释了,前面我们已经使用过了. 还是用

跟KingDZ学HTML5之四 继续探究Canvas之路径

哈哈,开始吧,这节课第一个内容是 路径.路径,顾名思义,就是俺拿着画笔,划线呗. 画图的几个步骤. 第一步:找个起点开始画图.----beginPath; 第二步 : 划线,画出自己想要的图像 . 第三步:完成图形,关闭路径. 当然也可以什么都不做,就是画一个点或者一条线   ----- closePath 第四步:填颜色. 哈哈,对不对啊,俺上小学,美术老师就是这么教的. 好了,先随便画一个图形吧.---画一条线,(*^__^*) 嘻嘻-- <script type="text/java

跟KingDZ学HTML5之七 探究Canvas之各种特效

初看到题目大家怎么个反应啊,哇塞,这么多啊,可是看完这节课程之后,你会发现这些功能不过如此. 1>移动  translate(x, y) 简单的说明一下 ,X  左右偏移量   Y  上下偏移量 说白了,就是说,假如原先的坐标在 (0,0) 那么 使用 translate(100,100) 之后,坐标就到 (100,100)这个点了 . 然后,我们首先呢,我先写个  "王"  哈哈,俺的姓. 效果图 哈哈. 大家可以看到,这是的坐标是以(0,0)为原点的.下面我们就想办法,将他更