在做移动端项目时,做个视频播放是不可避免的,大部分情况下都是点击一个按钮,视频全屏播放,下面将对这个情况进行分析与记录。
html:
<video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-player-type="h5" x5-video-player-fullscreen="true" hidden style="object-fit:fill;height:100vh;"></video>
其中,x5-video-player-fullscreen="true"是设置视频全屏,hidden是设置视频刚开始为隐藏状态,style中的object-fit:fill; 为视频在屏幕中的填充模式,有fill,cover和contain三种填充模式,可以根据需要设置。
js:
var video1 = document.getElementById("videoPlay1");//获取视频元素
var audio=document.getElementById("bg-music");//获取背景音乐
$('.learn').click(function () {
audio.pause();//背景音乐暂停
$('#videoPlay1').show();//视频展示
video1.play();//视频播放
video1.onended = function() {//视频播放结束执行的函数
$('#videoPlay1').hide();//视频隐藏
$(".music-btn").hasClass("pause")?audio.pause():audio.play();//音乐设置,如果音频播放视频前为暂停状态,音乐依然暂停,如果为播放状态,音乐播放
};
});
如有问题或是错误,欢迎留言。