移動端遇到的問題小結--video

本篇主要是針對Android系統,所遇到的問題。css

  • 1. video的全屏處理:

  這裏說的全屏是指針對瀏覽器的全屏,而不是整個手機的全屏。要想全屏效果只需對video標籤加   webkit-playsinline 。web

  可是這樣作會有一個問題:針對偏長的手機,視頻會出現居中的效果。針對這種狀況,能夠對video加屬性  object-fit:fill 瀏覽器

<video id="myvideo" src="test.mp4" webkit-playsinline="true" object-fit:fill></video>
  • 2. video的自動播放

  自動播放是指頁面加載完畢後,視頻自動開始播放。可是目前而言,Android機是不支持這種自動播放的。ide

  解決辦法:引導用戶觸發滑屏或者touch事件進行觸發 video.play()  進行播放spa

  • 3.移動端設置1px的border:

  爲解決兼容問題,如下爲固定代碼。代碼放置在須要寫border的容器的css樣式裏面。scala

  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(.5, #ffffff), color-stop(.5, transparent)) top left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)) bottom left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), color-stop(.5, #e8e8e8), color-stop(.5, transparent)) top left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#e8e8e8)) bottom left no-repeat, #ffffff;
  background: -webkit-linear-gradient(90deg, #ffffff, #ffffff) top left no-repeat, -webkit-linear-gradient(270deg, #ffffff, #ffffff) bottom left no-repeat, -webkit-linear-gradient(90deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) top left no-repeat, -webkit-linear-gradient(270deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) bottom left no-repeat, #ffffff;
  background: linear-gradient(0deg, #ffffff, #ffffff) top left no-repeat, linear-gradient(180deg, #ffffff, #ffffff) bottom left no-repeat, linear-gradient(0deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) top left no-repeat, linear-gradient(180deg, #e8e8e8, #e8e8e8, rgba(232, 232, 232, 0)) bottom left no-repeat, #ffffff;
  -webkit-background-size: 0 0, 0 0, 0 0, 100% 1px;

  PS:同時可參考該連接:https://zhuanlan.zhihu.com/p/26141351指針

  • 4.移動端頁面左右滑屏問題
     
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
相關文章
相關標籤/搜索