当前位置:首页 >  站长 >  编程技术 >  正文

HTML5在手机端实现视频全屏展示方法

 2020-12-02 10:25  来源: 脚本之家   我来投稿   球球的个人主页 撤稿纠错

  小红书种草一手资源覆盖200+行业

这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终于找到解决办法。

第一种:将视频放大来控制。

视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 100% 高度是 110% ,可以实现全屏,超过是溢出隐藏就可以了。

确定:手机屏幕尺寸不固定,这个高度110%不好确定。

第二种:使用 object-fit 来解决

直接上代码:

<video preload='auto' id='video'  src=''  webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true'  width='100%' height='100%'><p> 不支持video</p> </video>

编译后在页面内部播放视频而不会跳出使用系统播放器全屏播放视频了。而且z-index属性也可以正常定义,使其他元素可以覆盖在视频上面。

css:保持画面的原有比例

#my-video{
    object-fit: cover;
    object-position: center center;

简单的demo实现:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>视频播放器</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
</style>
</head>
<body>
<div id="app" class="app">
    <video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true'  width='100%' height='100%'><p> 不支持video</p> </video>
</div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
// vue 解析
var Application = new Vue({
    el: "#app",
    data: {
        videoUrl:'',
        video:null,
    },
    mounted: function(){
        this.videoUrl = "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4";

this.video = this.$refs.video;
    },
    methods: {
        player:function(){
            console.log(this.video.clientWidth);
            console.log(this.video.clientHeight);
            if(this.video.paused){
                // 播放
                this.video.play();
            }else{
                // 暂停
                this.video.pause()
            };           
        }
    }
});
</script>
</html>

解释下:object-fit

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个

详细了解 object-fit:https://www.cnblogs.com/e0yu/p/10670990.html

到此这篇关于HTML5在手机端实现视频全屏展示方法的文章就介绍到这了,更多相关HTML5视频全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/html5/753375.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 球球    /    文章:1886篇

相关文章

  • Html5之webcoekt播放JPEG图片流

    这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5
  • Html5 webRTC简单实现视频调用的示例代码

    这篇文章主要介绍了Html5webRTC简单实现视频调用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5
    代码设计
  • 移动端HTML5 input常见问题(小结)

    这篇文章主要介绍了移动端HTML5input常见问题(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5
  • 5G NR广播技术将推广 未来5G手机可免费接收电视节目

    A5创业网(公众号:iadmin5)12月4日报道,在近日举行的700MHz技术与产业应用研讨会上传来好消息,5GNR广播为了或许将大范围推广,5G手机可免费接收电视节目。

    标签:
    5g技术
    手机
  • 5G打开“视频社会化”闸门,视频手机后浪已至

    十年前,战地摄影记者桑山照彦如是说,他曾跟随美军进入阿富汗战场。他的选择并不意外。彼时,以苹果为代表的手机厂商正开启一场聚焦“拍照”的进化,手机拍摄能力指数级跃进,“手机替代相机”舆论甚嚣尘上。

热门排行

信息推荐

扫一扫关注最新创业资讯