HTML5 Audio & Video 属性解析
一、HTML 音频/视频 方法
play()
play() 方法开始播放当前的音频或视频。
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
pause()
pause() 方法暂停播放当前的音频或视频。
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
load()
load() 方法重新加载音频/视频(audio/video)元素。
load() 方法用于在更改来源或其他设置后对音频/视频(audio/video)元素进行更新。
<button onclick="changeSource()" type="button">更改视频来源</button>
<br>
<video id="video1" controls="controls" autoplay="autoplay">
<source id="mp4_src" src="mov_bbb.mp4" type="video/mp4">
<source id="ogg_src" src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<script>
function changeSource()
{
document.getElementById("mp4_src").src="movie.mp4";
document.getElementById("ogg_src").src="movie.ogg";
document.getElementById("video1").load();
}
</script>
canPlayType()
function supportType(e,vidType,codType)
{
myVid=document.createElement('video');
isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');
if (isSupp=="")
{
isSupp="No";
}
return isSupp;
}
二、HTML 音频/视频属性
autoplay
【设置】或【返回】是否在加载完成后随即播放音频/视频。
controls
【设置】或【返回】音频/视频是否显示控件(比如播放/暂停等)。
currentTime
【设置】或【返回】音频/视频中的当前播放位置(以秒计)。
defaultMuted
【设置】或【返回】音频/视频默认是否静音。
defaultPlaybackRate
【设置】或【返回】音频/视频的默认播放速度。
duration
【返回】当前音频/视频的长度(以秒计)。
ended
【返回】音频/视频的播放是否已结束
error
【返回】表示音频/视频错误状态的 MediaError 对象。
loop
【设置】或【返回】音频/视频是否应在结束时重新播放。
muted
【设置】或【返回】音频/视频是否静音。
paused
【设置】或【返回】音频/视频是否暂停。
playbackRate
【设置】或【返回】音频/视频播放的速度。
src
【设置】或【返回】音频/视频元素的当前来源。
volume
【设置】或【返回】音频/视频的音量。
二、HTML 音频/视频事件
canplay
当浏览器可以开始播放音频/视频时触发。
ended
当目前的播放列表已结束时触发。
error
当在音频/视频加载期间发生错误时触发。
pause
当音频/视频已暂停时触发。
play
当音频/视频已开始或不再暂停时触发。
playing
当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress
当浏览器正在下载音频/视频时触发。
ratechange
当音频/视频的播放速度已更改时触发。
seeked
当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking
当用户开始移动/跳跃到音频/视频中的新位置时触发。
timeupdate
当目前的播放位置已更改时触发。
volumechange
当音量已更改时触发。
waiting
当视频由于需要缓冲下一帧而停止时触发。
当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythroughHTML5 Audio & Video 属性解析的更多相关文章
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
- [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
- html5 audio/video 的那些坑
当我最近项目用到audio的时候,我们用到了jPlayer作为三方库. 功能实现了,暂停播放,进度条什么的,都很顺利的搞定了.后来考虑到当网速过慢时需要给播放按钮一个载入动画,然后就一发不可收拾了. ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...
随机推荐
- tf源码中的object_detection_tutorial.ipynb文件
今天看到原来下载的tf源码的目标检测源码中test的代码不知道跑哪儿去了,这里记录一下... Imports import numpy as np import os import six.moves ...
- FlinkX
FlinkX的安装与简单使用 目录 FlinkX的安装与简单使用 FlinkX的安装 FlinkX的简单使用 MySQLToHDFS MySQLToHive MySQLToHBase MySQLToM ...
- DNS服务/etc/rndc.key was found解决办法
问题: [root@localhost ~]# rndc reload rndc: neither /etc/rndc.conf nor /etc/rndc.key was found 解决办法: R ...
- 构造方法__construct()与析构方法__destruct() 构造方法:刚出生时婴儿的啼哭 析构方法:老人临终时的遗言
<?phpclass person{ var $name; var $sex; var $age;//构造方法 function __construct($name, $sex, $age) { ...
- 变量、变量作用域、常量final、变量的命名规范
变量 变量是什么:就是可以变化的量! Java是一种强类型语言,每个变量都必须声明其类型. Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域. 注意事项: 每个变量都有类型,类 ...
- 监督学习,无监督学习常用算法集合总结,引用scikit-learn库(监督篇)
why写这篇blog 最近在接触这方面的知识,但是找了许多的笔记,都感觉没有很好的总结出来,也正好当做是边学习,边复习着走.大佬轻喷.参考书目<python机器学习基础教程> 将分别从以下 ...
- ArcMap操作练习题目及答案
题目: 1.主观题(20分)用文字说明中学选址的过程,并说明分析过程中所用的空间分析方法和分析工具. 2.主观题(10分)计算目标区内道路网的密度.(数据框1) 3.主观题(20分)对roadnet里 ...
- ActiveMQ-模块代码-02
模块模式 p2p模式 生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...
- MyEclipse 05_连接mysql数据库进行增删改查
例子: 1.在数据库中建立如下表 2. 在MyEclipse里按本主博客文MyEclipse 03_jdbc连接数据库,注意数据库名要一致 运行后在Navicat里如下: 代码如下: package ...
- 使用.Net6中的System.Text.Json遇到几个常见问题及解决方案
前言 以前.NetCore是不内置JSON库的,所以大家都用Newtonsoft的JSON库,而且也确实挺好用的,不过既然官方出了标准库,那更方便更值得我们多用用,至少不用每次都nuget安装Newt ...