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. = 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);
作者：谭瞎
链接：https://www.jianshu.com/p/c4d0eca8041b