<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AV</title>
</head>
<body>
<div class="content">
<p>注意:audio标签设置controls="controls"才可以再页面中显示</p>
<p>IE9开始支持</p>
<div class="audio">
<audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>
不支持audio
</audio>
</div>
<div class="video">
<video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">
不支持video
</video>
</div>
<div class="networkState"></div>
<button id="getVideoURL">getVideoURL</button>
<button id="palyVideo">palyVideo</button>
<button id="pauseVideo">pauseVideo</button>
</div>
<script>
var page = {
init : function(){
this.listener();
},
listener : function(){
var video = document.getElementById('videoElement'); //error属性:不能正常读取,使用媒体数据
video.addEventListener('error', function(){
var error = video.error;
switch(error.code){
case 1 :
alert("视频的下载过程被中止");
break;
case 2 :
alert("网络发生故障,视频的下载过程被中止");
break;
case 3 :
alert('解码失败');
break;
case 4 :
alert("媒体资源不可用或是媒体格式不被支持");
}
},false); //networkState属性:加载过程使用networkState属性读取当前网络状态
video.addEventListener('progress',function(e){
var networkStateDisplay = document.getElementById('networkState');
if(video.networkState === 2){
//计算已加载的字节数与总字节数
networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";
}
else if(video.networkState === 3){
networkStateDisplay.innerHTML = "加载失败";
}
},false); //使用currentSrc属性:读取媒体数据的URL地址(只读)
var videoURL = video.currentSrc,
videoURLBtn = document.getElementById('getVideoURL');
videoURLBtn.onclick = function(){
//这里是空的,还不知道为什么???
console.log(videoURL);
}
//buffered属性 //readState属性 //seeking属性与seekable属性 //currenTime属性
//startTime属性 //duration属性 //play属性(开始时间,结束时间)
//paused属性(true_暂停,false_播放)
//ended属性(true_播放完毕,false_未完毕) //defaultPlaybackRate,playbackRate属性 //volume,muted属性 /*
方法:
play(),播放
pause(),暂停
load(),重新载入
*/ //监听视频播放结束事件
//注意这里不设置loop循环播放
video.addEventListener('ended',function(){
alert("播放结束");
},true) var palyVideoBtn = document.getElementById('palyVideo'),
pauseVideoBtn = document.getElementById('pauseVideo');
//播放视频play()
palyVideoBtn.onclick = function(){
video.play();
}
//暂停视频pause()
pauseVideoBtn.onclick = function(){
video.pause();
} /*
canPlayType方法:
空字符串——不支持
maybe——可能支持
probably:支持
*/
var support = video.canPlayType("video/mp4");
console.log(support);//maybe /*
在媒体读取和播放的过程中,还有一系列的事件。
对这些事件的捕捉:
(1)监听的方式
(2)获取事件句柄
*/ }
}
window.onload = page.init();
</script>
</body>
</html>

H5_ 多媒体video,autio使用示例的更多相关文章

  1. html5多媒体Video/Audio

    video:    1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源)      2.常见的音频格式     编码:AAC.MP3 ...

  2. flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例

    本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容! tutorial to use python flask jinja templates and ...

  3. HTML5新标签与特性---多媒体

    多媒体标签 embed:标签定义嵌入的内容 audio:播放音频 video:播放视频 多媒体 embed(会使用) embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.M ...

  4. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  5. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  6. Windows 8.1 Preview的新功能和新API

    http://msdn.microsoft.com/en-us/library/windows/apps/bg182410 App打包 新的App程序包将使App的提交更简单.资源包可以让你提供附加的 ...

  7. [学习笔记]15个QA让你快速入门51单片机开发

    一.C语言相关 Q1:sbit与sfr代表是什么?有什么作用? Q2:#define OSC_FREQ  22118400L这句宏命令里的“L”是什么意思? Q3:我粘贴了别人的代码,怎么发现没有un ...

  8. Day9:html和css

    Day9:html和css <head> <meta charset="UTF-8"> <title></title> <me ...

  9. html学习_html5 新增标签和属性

    html5 新增标签和属性 1.html发展历程(html有很多版本) 2.快捷键生成不同版本(html4.xhtml.html5) 文档类型不同.字符设定 3.常用新标签 (只有html5才识别的标 ...

随机推荐

  1. Mysql存储过程和函数区别介绍

    存储过程是用户定义的一系列sql语句的集合,涉及特定表或其它对象的任务,用户可以调用存储过程,而函数通常是数据库已定义的方法,它接收参数并返回某种类型的值并且不涉及特定用户表. 存储过程和函数存在以下 ...

  2. Java —— 枚举(Enum)的使用

    想用枚举,忘了具体的用法了.网上查了下,发现了个不错的网址.分享一下. http://docs.oracle.com/javase/tutorial/java/javaOO/enum.html

  3. 类的__slots__属性

    为什么有"slots"属性? 默认情况下,python对象队象的每个实例(instance)都会有一个字典来存储该实例的属性,这样做的好处在于运行时期每个对象可以任意设置新的属性. ...

  4. JavaMail API 1.4.7邮件发送

    下载oracle javaMail API: http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive- ...

  5. Linux磁盘分区实战案例

    一.查看新添加磁盘   [root@localhost /]# fdisk -l   磁盘 /dev/sda:53.7 GB, 53687091200 字节,104857600 个扇区 Units = ...

  6. Android Intent的花样启动

    刚开始看郭大神的<>,实现以下里面的一些例子.Intent的花样启动 显示Intent的使用. 实例化一个Intent,并且制定当前的activity和要跳转到的activity Inte ...

  7. SwiftyUserDefaults-封装系统本地化的框架

    // // ViewController.swift // Test4SwiftyUserDefaults // // Created by 马玉龙 on 2017/1/14. // Copyrigh ...

  8. Date——时间戳转化为YYYY-MM-DD h:m:s时间格式

    /** * example new Date(times) * @param time Date * @param fmt "yyyy-MM-dd" /"yyyy-MM- ...

  9. Luogu 2467[SDOI2010]地精部落 - DP

    Solution 这题真秒啊,我眼瞎没有看到这是个排列 很显然, 有一条性质: 第一个是山峰 和 第一个是山谷的情况是一一对应的, 只需要把每个数 $x$  变成 $n-x+1$ 然后窝萌定义数组 $ ...

  10. “私人助手”Beta版使用说明

    私人助手(Beta)版使用说明 私人助手这款软件是通过添加事件提醒功能,让用户能在正确的时间做正确的事情,使得工作变得更有效率,而这款软件的特色在于提醒模式的添加,用户可以通过震动.铃声提醒,我们的特 ...