1.视频暂停和播放
将JQ对象转换为原生JS对象
$('.icon-play').on('click', function () {
let video_cur = $(this).parent().find('video')[0];
if (video_cur.paused) {
video_cur.play();
video_cur.controls=true; // 显示控制条
$(this).hide();// 播放器按钮隐藏
} else {
video_cur.pause();
}
})
有遮罩层的视频播放和暂停
/**
* 视频播放
*/
$('.maskBox').on('click', function () {
let video_cur = $(this).parent().find('video')[0];
if (video_cur.paused) {
video_cur.play();
video_cur.controls = true; // 显示控制条
$(this).hide(); // 遮罩隐藏
}
});
/**
* 视频暂停
*/
$('.slide-video').on('click', function () {
let video_cur = $(this)[0];
if (video_cur.pause) {
video_cur.pause();
$('.maskBox').show();
video_cur.controls = false; // 隐藏控制条
}
});
2.音乐开关
// 音乐开关
$music.on('click',function () {
if (flag) {
$music.removeClass('rotate');
oMusic.pause();
flag = !flag;
} else {
$music.addClass('rotate');
oMusic.play();
flag = !flag;
}
})
3.视频切换+音量播放
pug
// 视频切换
.showVideo.hide
video.video-1.hide
source(src="media/north.mp4", type="video/mp4")
source(src="media/north.ogv", type="video/ogv")
source(src="media/north.webm", type="video/webm")
video.video-2.hide
source(src="media/tai.mp4", type="video/mp4")
source(src="media/tai.ogv", type="video/ogv")
source(src="media/tai.webm", type="video/webm")
video.video-3.hide
source(src="media/eng.mp4", type="video/mp4")
source(src="media/eng.ogv", type="video/ogv")
source(src="media/eng.webm", type="video/webm")
js
// 视频切换
let $showVideo = $('.showVideo'),
$videoBtnEnter = $('.videoBtn-enter'),
$musicClose = $('.music-close'),
$musicOpen = $('.music-open'),
music = document.getElementById('closeSound'),
html = '',
timer = '',
flag = true;
$videoBtnEnter.on('click', function () {
let index = $(this).index() + 1;
let name = `video-${index}`;
let v = document.getElementsByClassName(name)[0];
$showVideo.removeClass('hide').addClass('show');
v.classList.remove('hide');
v.classList.add('show');
if (flag) {
v.volume = 1;
} else {
v.volume = 0;
}
v.play();
clearInterval(timer);
timer = setInterval(function () {
$showVideo.removeClass('show').addClass('hide');
v.classList.remove('show');
v.classList.add('hide');
v.autoplay = false;
}, 3000)
});
// 音乐开关
music.onclick = function (e) {
if (flag) {
$musicClose.removeClass('hide').addClass('show');
$musicOpen.addClass('hide').removeClass('show');
flag = !flag;
} else {
$musicOpen.removeClass('hide').addClass('show');
$musicClose.removeClass('show').addClass('hide');
flag = !flag;
}
e.stopPropagation();
return false;
}
4.微信不能够自动播放
// 微信自动播放
let video = document.getElementById('video');
video.play();
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
}, false);
5.页面强制横屏问题
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
let detectOrient = function () {
let width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrap = $('#wrap');
// 横屏
if (width >= height) {
$wrap.css({
'font-size': '1066.67%',
'width': width,
'height': height,
'top': 0,
'left': 0,
'-webkit-transform': 'none',
'transform': 'none',
'-webkit-transform-origin': '0 0',
'transform-origin': '0 0'
});
} else {
// 竖屏
$wrap.css({
'font-size': '625%',
'width': height,
'height': width,
'top': (height - width) / 2,
'left': -(height - width) / 2,
'-webkit-transform': 'rotate(90deg)',
'transform': 'rotate(90deg)',
'-webkit-transform-origin': 'center center',
'transform-origin': 'center center'
});
}
}
window.onresize = detectOrient;
detectOrient();
6.H5--移动端视频video的android兼容，去除播放控件、全屏等
android下的html5的视频播放一直是前端兼容的重灾区、各种体验差，被诟病已久。
问题主要有几个方面：
1.全屏处理；
2.自动播放；
3.播放控制；
4.隐藏播放控件；
video全屏的处理
只需在video标签加个webkit-playsinline属性即可，这个属性基本上在基于webkit内核的移动端都是没问题的，此全屏非彼全屏，它是在浏览器视窗内的全屏，并不是占居整个手机的全屏，当然我们做web端需要的就是在document的body内的视窗范围的全屏。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
在ios下，视频被嵌入后，媒体的元数据加载完成后，会以全屏的形式显示出来，或者加个poster，可以看到画面。但在android下，多数机子是不显示视频画面的，要不就是显示一个黑色的还不是全屏的播放控件，即使及加个poster封面也不济于是。因为poster在android兼容的并不好，不如在视频上层加个div铺张图片，这个比较好的处理方式应该是：视频上加一层div做封面，由于android不允许视频上层有东西，所以首先将视频设为的width：1px，当播放后，上层的封面remove掉，同时width：100%或者你想要的宽度。
video的自动播放
问题：android下是不允许自动播放的，使用了video.play(),也是不行的，必须有用户的主动触发，比如触碰了屏幕，有click或者是touch事件产生。
解决：引导用户触发，滑屏或touch的行为，然后调用video.play()播放，给用户一个自动播放的错觉。
微信禁止下拉出现域名
body, html {
position: fixed;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
7.audio自动播放
在手机端浏览器中不能自动播放音频，需要借助事件
html
audio#audio(loop src="media/audio/music.mp3")
js
document.getElementById('audio').play();
8.H5 监听手机浏览器 后台唤醒 激活
// H5 监听手机浏览器 后台唤醒 激活
var reLoadLeftTime = false ;
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if(document[hiddenProperty]){
document.getElementById('audio').pause();
}else{
document.getElementById('audio').play();
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
