述

• ? 簡單說下需求，做的應(yīng)用是內(nèi)嵌了h5頁面，功能是h5使用Video標(biāo)簽，使用本地攝像頭，拍照上傳，現(xiàn)在測試發(fā)現(xiàn)兩個問題，第一個是點擊之后沒有響應(yīng)，第二個是默認(rèn)Video標(biāo)簽位置，是一張播放按鈕圖片，主要是解決兩個問題。

The First Question

• ? 一開始猜測也是權(quán)限問題，網(wǎng)上一頓搜索，找到相關(guān)解決方案，Webview中申請使用攝像頭等權(quán)限，需要額外申請相關(guān)權(quán)限，重寫Webview授權(quán)方法，我這邊處理是直接授權(quán)了。

mWebView.setWebChromeClient(new WebChromeClient() {
...
 @Override
 public void onPermissionRequest(PermissionRequest request) {
   if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.LOLLIPOP) {
       request.grant(request.getResources());
     }
  }    
...
}        

• ? 重新測試點擊h5拍照頁面，發(fā)現(xiàn)可以拍照了，然后了解了下除了視頻錄制權(quán)限，還有其他三個權(quán)限。

The Second Question

• ? 這個問題找了半天，最開始猜測是WebviewSetting設(shè)置的改下就好了，實際試了很多方法并且搜了很多資料，都不行，后面搜到stackoverflow中類似問題，可以重寫WebChromeClient的getDefaultVideoPoster方法，并且在掘金搜到海報屬性解讀，這個問題，可以從前端或者原生去解決。
• ? 原生解決的話重寫getDefaultVideoPoster方法

 @Override
 public Bitmap getDefaultVideoPoster() {
    return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
 }

• ? 前端頁面上解決的話,vido屬性增加poster屬性的值

poster="https://via.placeholder.com/1x1" or poster="noposter"

注意，空值將會被忽略 poster=""，所以賦值為空字符串是沒有用的。

• ? 根據(jù) MDN 的解釋，它的值為一張圖片的 URL，在以下情況中會被展示，外在表現(xiàn)是看起來替換了視頻的第一幀，好比一張“海報”。[1]視頻加載中 視頻加載完但未觸發(fā)播放 視頻播放完畢

參考

• ? 移除 Android WebView 中 video 默認(rèn)播放按鈕[2]
• ? stackoverflow - HTML5 video remove overlay play icon[3]
• ? video - MDN[4]

引用鏈接

[1] 根據(jù) MDN 的解釋，它的值為一張圖片的 URL，在以下情況中會被展示，外在表現(xiàn)是看起來替換了視頻的第一幀，好比一張“海報”。: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster
[2] 移除 Android WebView 中 video 默認(rèn)播放按鈕: https://juejin.cn/post/6979472595468943373
[3] stackoverflow - HTML5 video remove overlay play icon: https://stackoverflow.com/questions/18271991/html5-video-remove-overlay-play-icon
[4] video - MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

級版HTML視頻教程（全網(wǎng)原創(chuàng)首發(fā)！）

什么是HTML?HTML指的是超文本標(biāo)記語言，它是從事網(wǎng)頁設(shè)計工作的基礎(chǔ)，也是網(wǎng)站開發(fā)者必須熟練掌握的一門標(biāo)記語言。應(yīng)廣大學(xué)員的強烈要求，我愛自學(xué)網(wǎng)特推出《HTML基礎(chǔ)教程》，希望能得到廣大學(xué)員的支持。

學(xué)習(xí)交流

標(biāo) 題

第一課：HTML語言框架和相關(guān)標(biāo)簽95 1-1 學(xué)習(xí)html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標(biāo)簽和段標(biāo)簽29866 1-6 文字屬性標(biāo)簽28853 1-7 文字格式化標(biāo)簽26888 1-8 body標(biāo)簽27570 1-9 標(biāo)題標(biāo)簽25212

第二課：常用標(biāo)簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標(biāo)簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標(biāo)簽23217 2-10 轉(zhuǎn)義字符22227

第三課：表格標(biāo)簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

您說說看 我發(fā)明的...是不是很牛逼呀[滑稽]

總 高級版學(xué)習(xí)資料文件高達10G！！！

總 高級版學(xué)習(xí)高清視頻資料的高達35G！！！

需要的話我后期會更新，所以關(guān)注我，學(xué)到的好東西都是你自己的哦[滑稽]

那么大概內(nèi)容就更新到這里

本教程后期會逐一更新高清視頻學(xué)習(xí)資料+超詳細的學(xué)習(xí)資料教程！

別忘了四連！！【點贊 收藏 關(guān)注 投幣】

我怕你到時候想找我都找不到了～[鮮花]

注：本人原創(chuàng)首發(fā)，未經(jīng)允許禁止轉(zhuǎn)載/抄襲，如有違法，本人將有權(quán)追究法律責(zé)任！！！

<video>是HTML5中的新標(biāo)簽，<video>標(biāo)簽的作用是在HTML頁面中嵌入視頻元素。<video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。

video動態(tài)設(shè)置寬高：

video視頻是通過編輯器在后臺上傳的，上傳視頻時編輯器要求必須傳入視頻的寬高，而且必須是數(shù)字，不能是百分比，傳具體數(shù)字怎么適配各種型號的設(shè)備呢？

在前臺顯示視頻的時候，所有的video標(biāo)簽都有設(shè)置好的width和height屬性。

首先移除視頻設(shè)置的寬高屬性

　　$(function(){

　　$("video").removeAttr("width");

　　$("video").removeAttr("height");

　　})

然后在樣式里設(shè)置視頻的寬高為100%

　　video{width:100%;}

通過style樣式設(shè)置video寬高會受到video標(biāo)簽的width和height屬性的影響，因此把這些屬性移除了。

<video>標(biāo)簽支持HTML的全局屬性，支持HTML的事件屬性。

以上就是酷仔今日整理的“Web前端基礎(chǔ)教程：HTML5中的video動態(tài)怎么設(shè)置寬高”一文，希望對正在學(xué)習(xí)Web前端的同學(xué)提供參考。酷仔會持續(xù)更新Web前端教程及Python基礎(chǔ)教程相關(guān)的內(nèi)容，為有需求的同學(xué)提供學(xué)習(xí)資料。