1.視頻暫停和播放
將JQ對(duì)象轉(zhuǎn)換為原生JS對(duì)象
$('.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.音樂(lè)開(kāi)關(guān)
// 音樂(lè)開(kāi)關(guān)
$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)
});
// 音樂(lè)開(kāi)關(guān)
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.微信不能夠自動(dòng)播放
// 微信自動(dòng)播放
let video = document.getElementById('video');
video.play();
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
}, false);
5.頁(yè)面強(qiáng)制橫屏問(wèn)題
// 利用 CSS3 旋轉(zhuǎn) 對(duì)根容器逆時(shí)針旋轉(zhuǎn) 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--移動(dòng)端視頻video的android兼容，去除播放控件、全屏等
android下的html5的視頻播放一直是前端兼容的重災(zāi)區(qū)、各種體驗(yàn)差，被詬病已久。
問(wèn)題主要有幾個(gè)方面：
1.全屏處理；
2.自動(dòng)播放；
3.播放控制；
4.隱藏播放控件；
video全屏的處理
只需在video標(biāo)簽加個(gè)webkit-playsinline屬性即可，這個(gè)屬性基本上在基于webkit內(nèi)核的移動(dòng)端都是沒(méi)問(wèn)題的，此全屏非彼全屏，它是在瀏覽器視窗內(nèi)的全屏，并不是占居整個(gè)手機(jī)的全屏，當(dāng)然我們做web端需要的就是在document的body內(nèi)的視窗范圍的全屏。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
在ios下，視頻被嵌入后，媒體的元數(shù)據(jù)加載完成后，會(huì)以全屏的形式顯示出來(lái)，或者加個(gè)poster，可以看到畫(huà)面。但在android下，多數(shù)機(jī)子是不顯示視頻畫(huà)面的，要不就是顯示一個(gè)黑色的還不是全屏的播放控件，即使及加個(gè)poster封面也不濟(jì)于是。因?yàn)閜oster在android兼容的并不好，不如在視頻上層加個(gè)div鋪張圖片，這個(gè)比較好的處理方式應(yīng)該是：視頻上加一層div做封面，由于android不允許視頻上層有東西，所以首先將視頻設(shè)為的width：1px，當(dāng)播放后，上層的封面remove掉，同時(shí)width：100%或者你想要的寬度。
video的自動(dòng)播放
問(wèn)題：android下是不允許自動(dòng)播放的，使用了video.play(),也是不行的，必須有用戶(hù)的主動(dòng)觸發(fā)，比如觸碰了屏幕，有click或者是touch事件產(chǎn)生。
解決：引導(dǎo)用戶(hù)觸發(fā)，滑屏或touch的行為，然后調(diào)用video.play()播放，給用戶(hù)一個(gè)自動(dòng)播放的錯(cuò)覺(jué)。
微信禁止下拉出現(xiàn)域名
body, html {
position: fixed;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
7.audio自動(dòng)播放
在手機(jī)端瀏覽器中不能自動(dòng)播放音頻，需要借助事件
html
audio#audio(loop src="media/audio/music.mp3")
js
document.getElementById('audio').play();
8.H5 監(jiān)聽(tīng)手機(jī)瀏覽器 后臺(tái)喚醒 激活
// H5 監(jiān)聽(tīng)手機(jī)瀏覽器 后臺(tái)喚醒 激活
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);
