HTML●▂●5手中机端完成视頻全屏幕展现方式

日期:2021-03-24 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

近期做新项目,碰到一个难题,手中机上应完成视頻的全屏幕播发作用。检测了好长时间,总算寻找处理方法。

第一种:将视頻变大来操纵。

视頻在播发的情况下,全屏幕是依据高宽比来的,假如设定视頻 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视頻全屏幕內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:签署 企业网站建设 返回下一篇:没有了