星空网 > 软件开发 > 网页设计

HTML5 video标签实现视频播放

随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。

下面先介绍下video标签的一般用法

video标签的属性如下:

HTML5 video标签实现视频播放

注:control 属性供添加播放、暂停和音量控件。

一般用法:

<div class="videoCon">  <video width="750" height="300" id="videoP" src='/images/loading.gif' data-original="video.mp4"></video></div>

当然可以暂停,播放该视频,使用方法如下:

function playPause() {  var myVideo = document.getElementById('videoP');  if (myVideo.paused){    myVideo.play();  }else{  myVideo.pause();  }  }

 

当然video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

如下:

<video width="320" height="240" controls="controls"> <source src='/images/loading.gif' data-original="movie.ogg" type="video/ogg"> <source src='/images/loading.gif' data-original="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video>

 

再介绍下音频标签audio的使用(跟video的使用都一样):

<audio src='/images/loading.gif' data-original="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>

audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢
对象属性:
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false


对象方法:
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

再如下面:

<audio controls="controls">   <source src='/images/loading.gif' data-original="music.ogg" />  <source src='/images/loading.gif' data-original="music.mp3" />  <source src='/images/loading.gif' data-original="music.wav" /> </audio> 

 




原标题:HTML5 video标签实现视频播放

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流