zoukankan      html  css  js  c++  java
  • 移动端video不全屏播放

     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');
        }
    });
     
     
     
     
     
     


    转载链接:https://www.jianshu.com/p/5570c70e89f1


  • 相关阅读:
    table 如何不越过父级div
    sqlite3_column_type 与 SQLITE_NULL的区别
    lua 协程的理解
    linux 信号
    linux 查看文件夹大小
    linux 僵屍进程
    软件架构的理解
    jquery正则表达式
    linux C遍历目录下文件
    linux 进程间同步互斥
  • 原文地址:https://www.cnblogs.com/Alitar/p/10760485.html
Copyright © 2011-2022 走看看