播放音乐的html语言,Html5音频和视频播放示例详解
codebase="swflash.cab#version=6,0,10,0">
您的浏览器不支持video!
var video = document.getElementById("video");
//监听错误信息
video.addEventListener("error",function(){
var error = video.error;
var code = error.code;
switch (code){
case 1 :
console.info("视频加载被终止");
break;
case 2 :
console.info("网络原因,视频加载被终止");
break;
case 3 :
console.info("解码失败");
break;
case 4 :
console.info("视频格式不支持");
break;
}
},false);
/*
* networkState:网络状态属性,
* 在加载过程中读取当前网络的状态,
* NETWORK_EMPTY(数字为 0):网络链接初始状态,
* NETWORK_IDLE(数字为1):已经选择好媒体播放格式,未建立网络链接,
* NETWORK_LOADING(数字为2):媒体加载中...,
* NETWORK_NO_SOURCE(数字为3):没有支持的编码格式
*
* */
//获取networkState属性
/**
* 此处针对网络媒体而言,播放本地视频 net===3
* @type {Number}
*/
var net = video.networkState;
if(net==0){
console.info('网络链接初始状态..');
}else if (net==1){
console.info('已经选择好媒体播放格式,未建立网络链接');
}else if (net==2){
console.info('媒体加载中...');
}else if(net==3){
console.info('没有支持的编码格式');
}
//currentSrc:为只读属性,获取播放文件的src地址,本地文件为空
var src = video.currentSrc;
console.info("对应的src为:"+src);
//buffered:属性
/**
* 返回一个对象,实现了TimeRanges接口,
* 以确认浏览器是否缓存数据。
* TimeRanges:表示一段时间范围,大多数情况下TimeRanges对象表示的时间范围是一个从0开始的范围。
*
* TimeRanges:有一个length属性,表示有多少个时间范围,大多数情况下,存在时间范围时该值为1,不存在时为0.
* 有两个方法,start(index) 和end(index),大多数情况下index设置为0即可;
*
*
* @type {TimeRanges}
*/
var buf = video.buffered;
console.info(buf.length);
/**
* readyState属性:返回当前媒体播放位置的就绪状态,有五个可能值。
* HAVE_NOTHING:(数字为0)没有获取到媒体的任何信息,当前播放位置没有可播放的数据.
* HAVE_METADATA:(数字为1)已经获取到足够的媒体数据,但是当前位置的媒体数据无效.
* HAVE_CURRENT_DATA:(数字为2):当前位置已经有数据可以播放,但是没有获取到让播放器前进的数据。(
* 没有获取到下一帧的数据或者播放已经完成)
* HAVE_FUTURE_DATA:(数字3)表示当前位置已经获取到数据,可获取到让播放器前进的数据。为视频文件时,表示当前帧和下一帧
* 数据都获取到了,当当前位置是最后一帧时表示,readyState不可能为3状态(HAVE_FUTURE_DATA)。
* HAVE_ENOUGH_DATA:(数字4)表示当前位置已经获取到数据,可获取到让播放器前进的数据,
* 浏览器以某一速度加载,保证足够的数据进行播放。
* @type {number|Number}
*/
var state = video.readyState;
console.info("readyState属性为:"+state);
/**
* seekable 和seeking属性:表示浏览器是否正在请求特定播放位置的数据.
*
* seeking属性返回boolean值,true表示正在请求,false表示停止请求。
*
* seekable属性返回一个TimeRanges对象,表示请求到的时间范围。
*
* 均为只读属性。
* @type {TimeRanges}
*/
var seekable = video.seekable;
var seeking = video.seeking;
console.info("浏览器是否正在请求特定播放位置的数据:"+seeking);
/**
*
* @type {Number}
*/
var cur = video.currentTime;
var startTime = video.startTime;//开始播放的时间,一般为0
var duration = video.duration;//媒体文件总的播放时间.
console.info(cur+","+startTime+","+duration);
//浏览器支持不一致: Firefox:0 ,undefined,NaN Chrome: 0,0,NaN
/**
*played :读取已经播放的时间段
* @type {TimeRanges}
* */
var play = video.played;
/**
* 是否为暂停状态,
* true表示暂停播放,
* false表示正在播放
* @type {boolean}
*/
var paused = video.paused;
/**
* ended属性:boolean值
* true:表示播放完毕
* false:表示正在播放
* @type {boolean}
*/
var ended= video.ended;
/**
* defaultPlaybackRate:
* 修改或者读取默认的播放速率
* playbackRate:
* 修改或者读取当前的播放速率
* @type {Number}
*/
var rate = video.defaultPlaybackRate;
var playRate =video.playbackRate;
console.info("当前媒体的播放速率:"+rate);
/**
* volume属性: 读取或者修改默认音量,从0到1.0为静音,1为最大音量.
* @type {Number|CSSStyleDeclaration.volume|*}
*/
var volume = video.volume;
volume=0.4;
/**
* muted:返回boolean值。
* true:表示静音状态
* @type {boolean}
*/
var muted = video.muted;
console
.info("当前音量:"+volume+","+muted);// 1 ,false
var video = document.getElementById("video");
function pause(){
video.pause();
console.warn("视频已经暂停");
//判断是否为暂停状态
console.info(video.paused);
}
function play(){
video.play();
console.warn("视频开始播放...");
}
播放音乐的html语言,Html5音频和视频播放示例详解相关推荐
- php中左移和右移,c语言左移和右移的示例详解
逻辑移位,简单理解就是物理上按位进行的左右移动,两头用0进行补充,不关心数值的符号问题. 算术移位,同样也是物理上按位进行的左右移动,两头用0进行补充,但必须确保符号位不改变. 算术移位指令 算术移位 ...
- python音频转数组_python音频处理的示例详解
准备工作: 首先,我们需要 import 几个工具包,一个是 python 标准库中的 wave 模块,用于音频处理操作,另外两个是 numpy 和 matplot,提供数据处理函数. 一:读取本地音 ...
- python录音详解_python音频处理的示例详解
准备工作: 首先,我们需要 import 几个工具包,一个是 python 标准库中的 wave 模块,用于音频处理操作,另外两个是 numpy 和 matplot,提供数据处理函数. 一:读取本地音 ...
- C语言向右移三个字母怎么做,c语言左移和右移的示例详解
逻辑移位,简单理解就是物理上按位进行的左右移动,两头用0进行补充,不关心数值的符号问题. 算术移位,同样也是物理上按位进行的左右移动,两头用0进行补充,但必须确保符号位不改变. 算术移位指令 算术移位 ...
- html5代码转换为视频,HTML5中的视频代码详解
摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
- R语言tidyr包gather()函数实战详解:数据收缩、从宽表到窄表
R语言tidyr包gather()函数实战详解:数据收缩.从宽表到窄表 目录 R语言tidyr包gather()函数实战详解:数据收缩.从宽表到窄表 收缩两列数据
- R语言tidyr包spread()函数实战详解:数据裂变、从窄表到宽表
R语言tidyr包spread()函数实战详解:数据裂变.从窄表到宽表 目录 R语言tidyr包spread()函数实战详解:数据裂变.从窄表到宽表
- R语言tidyr包Unite()函数实战详解:多个数据列合并为一列
R语言tidyr包Unite()函数实战详解:多个数据列合并为一列 目录 R语言tidyr包Unite()函数实战详解:多个数据列合并为一列
- R语言tidyr包separate()函数实战详解:一列裂变为多列
R语言tidyr包separate()函数实战详解:一列裂变为多列 目录 R语言tidyr包separate()函数实战详解:一列裂变为多列 一列裂变为两列
最新文章
- 谈一谈我对AI项目落地的看法
- mkyaffs2image编译
- 正则-元字符 注意正则表达式中间不要随意加空格
- Android FileUtil(android文件工具类)
- linux7怎么安装yum,centos7下怎么安装yum
- 诚邀参加微软.NET俱乐部10月24日Windows 7社区发布会
- (组合数学笔记)拆分数各类定义及公式总结
- 小米9疑似入网工信部 官宣暗示发布时间
- 为什么很多技术都觉得前端很简单?为什么?为什么?
- MySQL高级知识(五)——索引分析
- Gartner 发布2017 年商业智能和分析平台魔力象限 Tableau 获“领先者”
- Manage Attachment feature
- 路由添加失败 参数错误_Django框架基础之路由详解 | 技术
- 小米游戏本2019 I7 9750H 黑苹果安装教程【OC 引导 + Big Sur11.6.1】
- bin文件转化为csv文件
- 全球地区选择,支持中英文切换。国家-省市-城市-地区
- 桌面文件不见了怎么恢复,用它不慌张!
- ArcGIS之栅格地图配准
- 人民币金额小写转换大写
- nginx中配置不输入端口(指定地址)访问项目的方法
热门文章
- Bailian2747 Bailian4146 数字方格【暴力】
- CCF NOI1153 素数环
- POJ1321 Bailian1321 棋盘问题【DFS】
- 自由度(degree of freedom)
- 熟悉 CMake(二)—— 以一个实例说明 CMakeLists.txt 文件的编写
- 机器学习基础(二十一)—— 分类与回归、生成模型与判别模型
- 辨异 —— 单词(同义词)的辨异
- utilities(C++)——错误提示
- python处理excel的优势-推荐一款数据处理的神级工具,完全结合了Python和Excel的优势...
- python软件-Python软件下载|Python最新版本v3.5.1 下载_当游网