微信開發中,H5的video標簽使用

<video></video>是HTML5新加入的標簽,最近流行的h5開發多以video技術集成一個H5頁面,效果也是很6的。現在總結一下用到的技術,主要的使用環境是微信,部分屬性一些手機的默認瀏覽器不支持,這些還需要讀者親測。

<videoid="videoID"src="video.mp4"poster="loadbg.jpg" 視頻封面preload="auto"x-webkit-airplay="allow"x5-video-player-type="h5" 啟用H5播放器,是wechat安卓版特性x5-video-player-fullscreen="true" 全屏設置,設置為 true 是防止橫屏x5-video-orientation="portraint" 播放器支付的方向,landscape橫屏,portraint豎屏,默認值為豎屏webkit-playsinline="true" 這個屬性是ios 10中設置可以讓視頻在小窗內播放,也就是不是全屏播放playsinline="true" IOS微信瀏覽器支持小窗內播放style="object-fit:fill">
</video>

這里介紹下它的樣式屬性object-fit屬性,它有兩個可以用的值:fill和contain。fill是把視頻拉伸或縮小,是視頻正好平鋪在video上,這樣會造成影響的拉伸,慎重使用;而contain類似于background-size的contain值,它把視頻放或縮小到容器能容下的最大尺寸,按照視頻的分辨率放入video標簽,這個屬性不會引起影響的變形,但是如果video的寬高比不等于影響的寬高比,那么會又video的背景露出。

一般產品經理希望保證影像不變形的情況下,全屏播放(不露出video的背景),我的思路是,采用contain值,設置video的寬高都為100%,通過操作video標簽的父容器尺寸改變video顯示的部分。即,首先比較屏幕的寬高比和視頻的寬高比,得出視頻的寬不夠還是高不夠導致露出白邊,然后讓露出白邊的video的父容器寬或高等于屏幕的寬或高,通過視頻的分辨率即寬高比,計算出video父容器的另一個方向的長度(款或高),然后在屏幕上居中,并且超出部分隱藏即可。注意,不能直接操作video的寬或高,這樣會沒有作用,因為他的寬或高是跟著父容器走的。

獻上代碼:

function initVideoSize() {var videoBox = doc.querySelector(".videoBox");var fpsBox = doc.querySelector(".fpsBox");var maxBorder = Math.max(winWidth,winHeight),minBorder = Math.min(winWidth,winHeight);//最大的一邊screenRatio = maxBorder / minBorder;//屏幕寬高比,我的視頻是橫屏,所以默認最長的是寬//視頻不夠寬if ( screenRatio > videoRatio ) {videoBox.style.height = maxBorder /  videoRatio + "px";videoBox.style.width = maxBorder + "px";videoBox.style.marginTop = - (maxBorder /  videoRatio - minBorder) / 2 + "px";videoBox.style.marginLeft = "0";fpsBox.style.height = maxBorder /  videoRatio + "px";fpsBox.style.width = maxBorder + "px";fpsBox.style.marginTop = - (maxBorder /  videoRatio - minBorder) / 2 + "px";fpsBox.style.marginLeft = "0";} else { //視頻不夠高videoBox.style.width = minBorder *  videoRatio + "px";videoBox.style.height = minBorder + "px";videoBox.style.marginLeft = - (minBorder *  videoRatio - maxBorder) / 2 + "px";videoBox.style.marginTop = "0";fpsBox.style.width = minBorder *  videoRatio + "px";fpsBox.style.height = minBorder + "px";fpsBox.style.marginLeft = - (minBorder *  videoRatio - maxBorder) / 2 + "px";fpsBox.style.marginTop = "0";}}

?

轉載于:https://www.cnblogs.com/zhangbob/p/8400109.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/252401.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/252401.shtml
英文地址,請注明出處:http://en.pswp.cn/news/252401.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

bundlefusion論文閱讀筆記

4. 全局位姿對齊(glob pose alignment) 輸入系統的是使用消費級的傳感器獲取的RGBD數據流&#xff0c;并且保證這些數據中的彩色圖像和深度圖像是時間和空間上都對齊的。圖像分辨率是640x480,頻率是30hz。我們的目的就是要找到frames之間的3D對應&#xff0c;然后根據這些對應…

IOC和DI的區別詳解

IOC 是英文inversion of control的縮寫&#xff0c;意思是控制反轉DI 是英文Dependency Injection的縮寫&#xff0c;意思是依賴注入 下面用一個簡單的例子來描述一下IOC和DI的關系 先看下總結&#xff1a; 依賴注入(DI)和控制反轉(IOC)是從不同的角度的描述的同一件事情&#…

TOMCAT啟動到一半停止如何解決

當你的項目過大的時候&#xff0c;往往會導致你的TOMCAT啟動時間過長&#xff0c;啟動失敗&#xff0c;遇到該情況可以試一下下面兩招&#xff1a; TOmcat啟動到一半的時候停止了&#xff0c;以下原因&#xff1a; 1、 tomcat啟動時間超過了設置時間&#xff1a; 解決辦法&…

視覺slam十四講ch6曲線擬合 代碼注釋(筆記版)

1 #include <opencv2/core/core.hpp>2 #include <ceres/ceres.h>3 #include <chrono>4 5 using namespace std;6 7 // 代價函數的計算模型8 struct CURVE_FITTING_COST9 {10 CURVE_FITTING_COST ( double x, double y ) : _x ( x ), _y ( y ) {}11 /…

Dojo 如何測試 widget

測試 dojo/framework/src/testing/README.mdcommit 84e254725f41d60f624ab5ad38fe82e15b6348a2 用于測試和斷言 Dojo 部件期望的虛擬 DOM 和行為的簡單 API。 測試 Features harness APICustom Comparatorsselectors harness.expect harness.expectPartial harness.triggerharn…

python中將四元數轉換為旋轉矩陣

在制作bundlefusion時,想測試TUM數據集,并且將groundtruth寫入到數據集中,TUM中給定的groundtruth中的旋轉是使用四元數表示的,而bundlefusion中需要SE3的形式,所以我需要首先將四元數轉換為旋轉矩陣,然后再將其與平移向量合并在一起,因為我之前關于生成bundlefusion數據集寫了…

js -- 時間轉年月日

/*** 時間轉年月日* param sdate 開始的時間* param edate 結束的時間* returns {*}*/function day2ymrStr2(sdate, edate) {var day2ymrStr "";var date1 new Date(edate);var date2 new Date(sdate);var y 0, m 0, d 0;var y1 date1.getFullYear();var m1 …

iOS sha1加密算法

最近在項目中使用到了網絡請求簽名認證的方法&#xff0c;于是在網上找關于OC sha1加密的方法&#xff0c;很快找到了一個大眾使用的封裝好的方法&#xff0c;以下代碼便是 首先需要添加頭文件 #import<CommonCrypto/CommonDigest.h> 然后直接使用下面的方法就可以了 //s…

Linux開發5款實用工具推薦

今天安利給大家5款實用的Linux開發工具&#xff0c;希望對大家工作效率的提升有所幫助。容器放眼于現實&#xff0c;現在已經是容器的時代了。容器既及其容易部署&#xff0c;又可以方便地構建開發環境。如果你針對的是特定的平臺的開發&#xff0c;將開發流程所需要的各種工具…

TUM數據集制作BundleFusion數據集

BundleFusion的數據集中,在生成.sens文件之前,包括彩色圖,深度圖和一個位姿文件,并且這個pose文件中的位姿態是有變化的,所以我懷疑,推測,在這個pose文件中可以寫入groundtruth的位姿,然后在重建的時候就按照傳入的位姿進行計算.為了測試一下效果,我從TUM數據集開始入手,這個數…

Linq查詢datatable的記錄集合

通過linq查詢datatable數據集合滿足條件的數據集 1.首先定義查詢字段的變量&#xff0c;比方深度 string strDepth查詢深度的值&#xff1b; var dataRows from datarow in dataTable(須要查詢的datatable數據集).AsEnumerable() where …

Java 概述和編程基礎

First of all&#xff0c;Java概述&#xff1a; 類是Java程序設計的基石和基本單元&#xff1b; main()方法是程序的入口&#xff0c;它是共有的、靜態的&#xff0c;參數String[] args表示一個字符串數組可以傳入該程序&#xff0c;用來傳遞外部數據以初始化程序。   計算機…

19、Fragment

一、Fragment 1.1、fragment介紹 fragment的出現是為了同時適應手機和平板&#xff0c;可以將其看做Activity的組成部分&#xff0c;甚至Activity界面完全由不同的Fragment組成&#xff0c;它擁有自己的生命 周期和接收、處理用戶的事件&#xff0c;更為重要的是&#xff0c;可…

喜好:

不喜歡吃&#xff1a;一瓣瓣的蘑菇、海帶、豆腐皮、 不喜歡喝&#xff1a;魚湯&#xff1b; 不喜歡吃&#xff1a;山楂片、法式小面包&#xff08;軟軟的&#xff09;、果凍、 不喜歡喝&#xff1a;對飲料無感、不喜歡脈動、可樂雪碧等少量還行、 喜歡&#xff1a;啃骨頭、排骨…

將TUM數據集制作成BundleFusion數據集

在上一篇文章中,我寫到了如何將TUM數據生成BundleFusion所需要的數據集,生成的數據集如下圖中所示.并且是將每一組數據的groundtruth.txt中的位姿數據寫如到這里的pose文件中,作為每一幀圖像的先驗位姿. 今天我便將生成的數據集轉換為了.sens格式,然后運行bundlefusion算法,第…

每一次突破都是一種進步

一直以來&#xff0c;我接觸一門新技術&#xff0c;都是先看開發文檔&#xff0c;了解了這個技術是做什么的&#xff0c;能做什么。但是不知道怎么起步&#xff0c;也不敢貿然動手。我的解決辦法是看視頻&#xff0c;看別人怎么使用&#xff0c;跟著別人做&#xff0c;然后聽別…

mysql盲注學習-1

mysql: 1.left() //left()函數 left(a,b)從左側截取a,的b位 2.mid() //mid()函數 參數 描述 column_name 必需。要提取字符的字段。 start 必需。規定開始位置&#xff08;起始值是 1&#xff09;。 length 可選。要返回的字符數。如果省略&#xff0c;則 MID() 函數…

二分學習筆記

寫在前面 二分是一種常用且非常精妙的算法&#xff0c;常常是我們解決問題的突破口。二分的基本用途是在單調序列或單調函數中做查找。因此當問題的答案具有單調性時&#xff0c;就可以通過二分把求解轉化為判定。進一步地&#xff0c;我們還可以通過三分法解決單調函數的極值以…

解析.sens數據集

python腳本在下面網址中https://github.com/ScanNet/ScanNet/tree/master/SensReader/python 一定要使用python2運行此腳本. 使用指令如下 python reader.py --filename /media/yunlei/YL/DATASETS/ICL_DATABASE/lr_kt1/living_room_traj1n_frei_png.sens --output_path /me…

ConcurrentHashMap 解讀

初始化&#xff1a; 問題&#xff1a;如何當且僅只有一個線程初始化table 1 private final Node<K,V>[] initTable() {2 Node<K,V>[] tab; int sc;3 while ((tab table) null || tab.length 0) {4 if ((sc sizeCtl) < 0)5 …