HTML5 video标签实现视频播放:普通篇

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

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

video标签的属性如下:

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

一般用法:

<div class="videoCon">
  <video width="750" height="300" id="videoP" src="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="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

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

<audio src="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="music.ogg" />
   <source src="music.mp3" />
   <source src="music.wav" />
</audio> 
时间: 2024-10-05 04:18:33

HTML5 video标签实现视频播放:普通篇的相关文章

Web视频播放 之 【HTML5 Video标签】

一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持. 对于IE8及以下的IE浏览器,可考虑引入html5扩展支持js来尝试解决,未亲测. 三.视频协议支持 支 持:Ogg.MPEG4.WebM 不支持:rtmp.rtsp(如果进行转码,切成HLS可以播放,但是即使在局域网内也有3秒

[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入视频 <video src="/movie.mp4" controls="controls"> 你就用这个浏览器有出息吗?

HTML5 video标签播放视频下载原理

HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 --> <source src="assets/dizzy.mp4" type="video/mp4"

html5 video标签不能播放mp4的问题

最近项目中遇到的问题如下: 利用html5中的 video 标签去播放视频,但是发现有的mp4格式的视频可以播放,有的mp4格式的视频不能播放. 视频格式 首先 video 标签只支持MPEG4,Ogg,WebM 三种视频格式,浏览器支持情况如下: 但是,video标签对这三种视频格式是有具体要求的 Ogg = 带有 Theora 视频编码 + Vorbis 音频编码 MPEG4 = 带有 H.264 视频编码 + AAC 音频编码 WebM = 带有 VP8 视频编码 + Vorbis 音频编

个人小记 html5 video标签

最近在制作网页播放视频的时候,毫不迟疑的选择了video标签,但是在使用的时候遇到了奇葩的问题. video学习地址:http://www.w3school.com.cn/html5/html5_video.asp 在使用标签播放MP4视频的时候,有声音但是没有视频画面 使用示例如下: <video src="/data/ship.mp4" type="video/mp4" id="player1" poster="../medi

HTML5 VIDEO标签

属性: src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 获取video标签:var Media = document.getElementById("video"); Media.error; //null:正常 Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 /

HTML5 Video标签的属性、方法和事件汇总介绍

<video>标签的属性 代码如下: src :视频的属性poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度 html 代码 代码如下: <video id="media" src="http://www.jb51.net/test.mp4" controls width="400px" he

HTML5 - video标签和audio标签

video标签和audio标签 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>video标签和audio标签</title> <head> <body> <h2>video标签的使用</h2> <!-- <video src=&quo

搭建服务器之www-向外提供视频服务by html5 video标签

搭建好www服务器,主要目的有两个一个是试验下,另一个是想给女朋友个惊喜,给她个带视频的网页,嘿嘿当前测试下相应功能. 1,采用html5的视频功能:bideo标签. 源码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>video with control</title> </head> <body> i lov