html5video脚本 html 脚本

html5 video事件怎么用

video有一下属性

src ：视频的属性

poster：视频封面，没有播放时显示的图片

preload：预加载

autoplay：自动播放

loop：循环播放

controls：浏览器自带的控制条

width：视频宽度

height：视频高度

html 代码：

video id="media" src="" controls width="400px" heigt="400px"/video  

 //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

获取video对象：

Media = document.getElementById("media");

Media方法和属性：

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

Media.error; //null:正常

Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//网络状态 

- Media.currentSrc; //返回当前资源的URL

- Media.src = value; //返回或设置当前资源的URL

- Media.canPlayType(type); //是否能播放某种格式的资源

- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源

- Media.load(); //重新加载src指定的资源

- Media.buffered; //返回已缓冲区域，TimeRanges

- Media.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态 

- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

- Media.seeking; //是否正在seeking

//回放状态

Media.currentTime = value; //当前播放的位置，赋值可改变位置

Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0

Media.duration; //当前资源长度 流返回无限

Media.paused; //是否暂停

Media.defaultPlaybackRate = value;//默认的回放速度，可以设置

Media.playbackRate = value;//当前播放速度，设置后马上改变

Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文

Media.seekable; //返回可以seek的区域 TimeRanges

Media.ended; //是否结束

Media.autoPlay; //是否自动播放

Media.loop; //是否循环播放

Media.play(); //播放

Media.pause(); //暂停

//视频控制

Media.controls;//是否有默认控制条

Media.volume = value; //音量

Media.muted = value; //静音

TimeRanges(区域)对象

TimeRanges.length; //区域段数

TimeRanges.start(index) //第index段区域的开始位置

TimeRanges.end(index) //第index段区域的结束位置

//相关事件

 var eventTester = function(e){

     Media.addEventListener(e,function(){

         console.log((new Date()).getTime(),e)

     },false);

 }

eventTester("loadstart"); //客户端开始请求数据

eventTester("progress"); //客户端正在请求数据

eventTester("suspend"); //延迟下载

eventTester("abort"); //客户端主动终止下载（不是因为错误引起）

eventTester("loadstart"); //客户端开始请求数据

eventTester("progress"); //客户端正在请求数据

eventTester("suspend"); //延迟下载

eventTester("abort"); //客户端主动终止下载（不是因为错误引起），

eventTester("error"); //请求数据时遇到错误

eventTester("stalled"); //网速失速

eventTester("play"); //play()和autoplay开始播放时触发

eventTester("pause"); //pause()触发

eventTester("loadedmetadata"); //成功获取资源长度

eventTester("loadeddata"); //

eventTester("waiting"); //等待数据，并非错误

eventTester("playing"); //开始回放

eventTester("canplay"); //可以播放，但中途可能因为加载而暂停

eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕

eventTester("seeking"); //寻找中

eventTester("seeked"); //寻找完毕

eventTester("timeupdate"); //播放时间改变

eventTester("ended"); //播放结束

eventTester("ratechange"); //播放速率改变

eventTester("durationchange"); //资源长度改变

eventTester("volumechange"); //音量改变

相关问答

Q1: HTML5中 使用video标签 播放本地视频

1、新建一个html文件，命名为test.html，用于介绍如何使用video控制视频。

2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。

5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件，测试js控制视频播放的效果。

Q2: 求教：html5如何实现连续播放多个视频

连续播放两个视频是什么意思？

如果是同时播放两个，写两个 video/video标签就行了，一个标签放一个视频；

如果是播放完一个视频后接着再播放下一个视频这样连续播放，用脚本监听 video 标签的视频播放结束 事件，再接着播放下一个视频就行；

1

video id="video" src="test1.mp4"/video

script

var video = document.getElementById('video');

video.addEventListener('ended',function(){

// 第一个视频播放结束

// 如果要继续播放第二个视频，改变 video 标签的 (src="test2.mp4") 属性或者新建一个 video 标签播放视频都可以

},false);

/script

Q3: 初识 HTML5 Video Blob

为何会有一个 blob？直接点击这个链接，返回了 404！什么情况？于是对此做了一番探索。

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .

首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来，通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调，可以知晓数据已经加载完毕，然后关闭数据流，调用 Video::play 函数通知浏览器播放视频。至此，整个 Blob 运行机制讲解完毕。

W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的， 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。

综上，这个只是 HTML5 提供的新特性，但是截止目前还是处于试验状态。

在上面示例中使用的视频格式不是普通的 MP4 而是 FMP4 。如果没有注意到这个问题，就可能造成：

HTML5 MediaSource works with some mp4 files and not with others (same codecs)。

解决方案：

It works fine if mp4 is fragmented.

You can do that using Bento4's mp4fragment tool.

Q4: html5的video属性怎么兼容ie7/8，求指导！！！！！

1、首先在页面的head部分加入如下脚本

可以通过使用IE条件注释的方法，只在旧版IE浏览器中加载这条JS脚本。

2、然后再使用audio或video添加音频视频就行了

1 !-- 视频媒体标签 --

2

3 video src="iefans.net.mp4" width="320" height="200" controls preload/video

4

5 !-- 音频媒体标签 --

6

7 audio src="iefans.net.mp3" controls preload/audio

8

9 这样便可以在IE8，甚至老掉牙的IE6浏览器中使用audio和video标签了。

像这类为不支持html5标签而出现的JS项目，会随着HTML5浏览器和HTML5的优势展现会越来越多起来。

html5video脚本的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html 脚本、html5video脚本的信息别忘了在本站进行查找喔。