欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 视频播放事件属性与API控件

程序员文章站 2022-11-28 11:27:52
  在过去,我们如果想在web上播放视频,也是都是通过flash来播放,同样并不是所有的都安装了flash播放器插件,而现在我们在html5中,就能完全脱离flash或其他的插件来播放视频...

 

在过去,我们如果想在web上播放视频,也是都是通过flash来播放,同样并不是所有的都安装了flash播放器插件,而现在我们在html5中,就能完全脱离flash或其他的插件来播放视频了

 

1、视频格式的简单介绍

视频格式:avi、rmb、wmv、mpeg4、ogg、webm

视频主要有三部分组成:视频、音频、编码格式

html5支持的格式:

ogg= 带有 theora 视频编码和 vorbis 音频编码的 ogg 文件

mpeg4= 带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件

webm = 带有 vp8 视频编码和 vorbis 音频编码的 webm 文件

 

2、html5视频标签<video>属性

 

<video src="movie.mp4" controls="controls"> </video>

 

<video src="movie.mp4" controls="controls">

   浏览器不支持html5的视频播放功能

</video>

 

<video  width="300"  controls="controls"  …>

    <source src="movie.ogg" type="video/ogg">

    <source src="movie.mp4" type="video/mp4">

</video>

HTML5 视频播放事件属性与API控件

 

3、html5视频api控件

获得video标签,这里是dom对象

varvideo = document.getelementbyid('videoid');

也可以通过jquery的方法,如下:

varvideo = $('#videoid').get(0);

载入视频:load() ,

播放视频:play() ,

暂停:pause() ,

快进10秒:currenttime+=10

播放速度增加:playbackrate++

播放速度增加0.1:playbackrate+=0.1

音量增加:volume+=0.1

静音:muted=true

 

3、示例

 

<!doctype html>

<head>

<meta charset=utf-8>

<title>html5视频教程-视频播放功能</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

</script>

<script>

$(document).ready(function(){  

    var video = $('#myvideo');

      

    $("#play").click(function(){  video[0].play();  });

    $("#pause").click(function(){ video[0].pause(); });

    $("#go10").click(function(){  video[0].currenttime+=10;  });

    $("#back10").click(function(){  video[0].currenttime-=10;  });

    $("#rate1").click(function(){  video[0].playbackrate+=2;  });

    $("#rate0").click(function(){  video[0].playbackrate-=2;  });

    $("#volume1").click(function(){  video[0].volume+=0.1;  });

    $("#volume0").click(function(){  video[0].volume-=0.1;  });

    $("#muted1").click(function(){  video[0].muted=true;  });

    $("#muted0").click(function(){  video[0].muted=false;  });

    $("#full").click(function(){ 

      video[0].webkitenterfullscreen(); // webkit类型的浏览器

      video[0].mozrequestfullscreen();  // firefox浏览器

    });

});

  

</script>

</head>

<video id="myvideo" width="400">

    <source src="iceage4.mp4" type="video/mp4" />

    <source src="iceage4.webm" type="video/webm" />

    <source src="iceage4.ogv" type="video/ogg" />

        你的浏览器不支持html5

</video>

<hr>

<button id="play">播放</button>

<button id="pause">暂停</button>

<button id="go10">快进10秒</button>

<button id="back10">快退10秒</button>

<button id="rate1">播放速度+</button>

<button id="rate0">播放速度-</button>

<button id="volume1">声音+</button>

<button id="volume0">声音-</button>

<button id="muted1">静音</button>

<button id="muted0">解除静音</button>

<button id="full">全屏</button>

</body>

  

</body>

</html>

效果

HTML5 视频播放事件属性与API控件