share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 71|回复: 0

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

[复制链接]

411

主题

788

帖子

2211

积分

金牌会员

Rank: 6Rank: 6

积分
2211
发表于 2020-12-24 15:38:11 | 显示全部楼层 |阅读模式

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

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

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

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

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

直接上代码:

  1. <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:保持画面的原有比例

  1. #my-video{
  2. object-fit: cover;
  3. object-position: center center;
复制代码

简单的demo实现:

  1. <!doctype html>
  2. <html lang=&quot;en&quot;>
  3. <head>
  4. <meta charset=&quot;UTF-8&quot;>
  5. <meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot; />
  6. <title>视频播放器</title>
  7. <style type=&quot;text/css&quot;>
  8. *{margin:0px; padding:0px;}
  9. .app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
  10. .video{width: 100%; height: 100%;}
  11. #my-video{object-fit: cover; object-position: center center;}
  12. </style>
  13. </head>
  14. <body>
  15. <div id=&quot;app&quot; class=&quot;app&quot;>
  16. <video preload='auto' id='my-video' ref=&quot;video&quot; :src=&quot;videoUrl&quot; @click=&quot;player&quot; loop autoplay=&quot;autoplay&quot; 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>
  17. </div>
  18. </body>
  19. <script type=&quot;text/javascript&quot; src=&quot;./js/vue.min.js&quot;></script>
  20. <script type=&quot;text/javascript&quot;>
  21. // vue 解析
  22. var Application = new Vue({
  23. el: &quot;#app&quot;,
  24. data: {
  25. videoUrl:'',
  26. video:null,
  27. },
  28. mounted: function(){
  29. this.videoUrl = &quot;http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4&quot;;
  30. this.video = this.$refs.video;
  31. },
  32. methods: {
  33. player:function(){
  34. console.log(this.video.clientWidth);
  35. console.log(this.video.clientHeight);
  36. if(this.video.paused){
  37. // 播放
  38. this.video.play();
  39. }else{
  40. // 暂停
  41. this.video.pause()
  42. };
  43. }
  44. }
  45. });
  46. </script>
  47. </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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 12:34 , Processed in 0.039353 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表