手机移动端视频全屏播放（兼容Android与iOS） |
您所在的位置：网站首页 › 苹果手机视频怎么全屏播放不了呢 › 手机移动端视频全屏播放（兼容Android与iOS） |
|
在做移动端项目时，做个视频播放是不可避免的，大部分情况下都是点击一个按钮，视频全屏播放，下面将对这个情况进行分析与记录。 html: 其中，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();//音乐设置，如果音频播放视频前为暂停状态，音乐依然暂停，如果为播放状态，音乐播放 }; });如有问题或是错误，欢迎留言。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |