移动端video不全屏播放

最新推荐文章于 2022-07-26 10:18:33 发布

转载最新推荐文章于 2022-07-26 10:18:33 发布 · 737 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Alitar/p/10760485.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML5的video标签实现视频的内联播放，并通过自定义CSS和JavaScript来增强视频控件的功能，包括自定义封面图和播放按钮，以及控制视频的加载时机。

 1 <div class="m-video">
 2     <video x5-playsinline="" playsinline="" webkit-playsinline="" preload="none" poster="images/img7.jpg">
 3         <source src="video/myvideo.mp4" type="video/mp4">
 4     您的浏览器不支持 video 标签。
 5     </video>
 6     <!--自定义默认封面图-->
 7     <div class="bg" style="background-image:url(images/img7.jpg);"></div>
 8     <!--自定义播放按钮-->
 9     <a href="javascript:void(0);" class="btn"></a>
10 </div>

x5-playsinline ————————————该属性是让视频内联播放（兼容安卓和x5相关的内核）
playsinline、webkit-playsinline—————该属性是让视频内联播放
preload———————————————视频加载时机，none为默认不加载（点击播放时再加载）
poster————————————————video自带封面图属性

CSS

.m-video video{object-fit: cover;}

object-fit:cover;可以让video的宽高自动撑满父标签的宽高。

JS

$(".m-video .btn").click(function(){
    var that=$(this);
    var videoBg=that.prev(".bg");
    var _video=videoBg.prev("video")[0];
    if(_video.paused){
    _video.play();
    videoBg.hide();
    that.addClass('on');
    }else{
        _video.pause();
        videoBg..show();
        that.removeClass('on');
    }
});