HTML5与微信开发(2)-视频播放事件及API属性

HTML5 的视频播放事件想必大家已经期待很久了吧,在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法:
第一种:安装FLASH插件或者微软发布的插件
第二种:在本地安装播放器,在线播放组件之类的
因为并不是所有的浏览器都安装了FLASH插件,就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的,安卓虽然一开始的时候支持FLASH,但是在安卓4.0以后也开始不支持FLASH了,看来FLASH是比较消耗CPU的。
所以针对这一情况,HTML5做了 比较大的改动,新加了< video>标签。

< video>标签属性

第一种:传统方式

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

第二种:如果浏览器不支持的话会进行提示

<video src="move.mp4" controls="controls">
浏览器不支持HTML5视频播放
</video>

第三种:如果浏览器不支持播放格式会尝试其他格式播放,如果不支持第一个就转第二个播放

<video width="500" controls="controls">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
</video>

属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

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

播放器示例



<!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" src="zhuoyaoji.mp4" width="400"> 你的浏览器不支持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,视频,微信)