设置meta标签
<!--添加viewport标签-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--禁止将数字变为电话号码-->
<meta name="format-detection" content="telephone=no" />
<!--ios设备的safari的私有meta标签-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--ios的私有标签-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
设置body、html的font-size
- 通过js设置
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
- 通过scss、less等设置 $num 为实际的px值
@function rem($num){
@return unquote(($num/100) + 'rem');
}
设置之后使用rem作为单位来适配手机屏幕
video.js的使用
- 引入js，css文件,也可以直接下载到本地再引入
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
- 使用video标签
<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
data-setup='{}'>
<source src="really-cool-video.mp4" type='video/mp4'>
<source src="really-cool-video.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
也可以通过js改变值：
var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
VideoJs API方法：
- 获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){
//在回调函数中，this代表当前播放器，
//可以调用方法，也可以绑定事件。
})
- 播放:
myPlayer.play(); - 暂停:
myPlayer.pause(); - 获取播放进度:
var whereYouAt = myPlayer.currentTime(); - 设置播放进度:
myPlayer.currentTime(120); - 视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效:
var howLongIsThis = myPlayer.duration(); - 缓冲，就是返回下载了多少:
var whatHasBeenBuffered = myPlayer.buffered(); - 百分比的缓冲:
var howMuchIsDownloaded = myPlayer.bufferedPercent(); - 声音大小（0-1之间）:
var howLoudIsIt = myPlayer.volume(); - 设置声音大小:
myPlayer.volume(0.5); - 取得视频的宽度:
var howWideIsIt = myPlayer.width(); - 设置宽度:
myPlayer.width(640); - 获取高度:
var howTallIsIt = myPlayer.height(); - 设置高度:
myPlayer.height(480); - 一步到位的设置大小:
myPlayer.size(640,480); - 全屏:
myPlayer.enterFullScreen(); - 离开全屏:
myPlayer.enterFullScreen(); - 添加事件:
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};
- 事件绑定
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});
- 删除事件
myPlayer.removeEvent(“eventName”, myFunc);
我遇到的坑：
- video标签支持的视频的格式需要与规定的一致。
参考：www.w3school.com.cn/html5/html_…
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 - ios版本播放的问题
因为我是用Hbuiler测试手机的，设置了内置服务器之后，一直用ios手机访问都不成功，视频无法播放，找了无数种方法，结果是错在了服务器支持的MIME类型里。也就是我换成xampp作为服务器去访问时成功的！！！
