述

• ? 简单说下需求，做的应用是内嵌了h5页面，功能是h5使用Video标签，使用本地摄像头，拍照上传，现在测试发现两个问题，第一个是点击之后没有响应，第二个是默认Video标签位置，是一张播放按钮图片，主要是解决两个问题。

The First Question

• ? 一开始猜测也是权限问题，网上一顿搜索，找到相关解决方案，Webview中申请使用摄像头等权限，需要额外申请相关权限，重写Webview授权方法，我这边处理是直接授权了。

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

• ? 重新测试点击h5拍照页面，发现可以拍照了，然后了解了下除了视频录制权限，还有其他三个权限。

The Second Question

• ? 这个问题找了半天，最开始猜测是WebviewSetting设置的改下就好了，实际试了很多方法并且搜了很多资料，都不行，后面搜到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=""，所以赋值为空字符串是没有用的。

• ? 根据 MDN 的解释，它的值为一张图片的 URL，在以下情况中会被展示，外在表现是看起来替换了视频的第一帧，好比一张“海报”。[1]视频加载中 视频加载完但未触发播放 视频播放完毕

参考

• ? 移除 Android WebView 中 video 默认播放按钮[2]
• ? stackoverflow - HTML5 video remove overlay play icon[3]
• ? video - MDN[4]

引用链接

[1] 根据 MDN 的解释，它的值为一张图片的 URL，在以下情况中会被展示，外在表现是看起来替换了视频的第一帧，好比一张“海报”。: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster
[2] 移除 Android WebView 中 video 默认播放按钮: 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视频教程（全网原创首发！）

什么是HTML?HTML指的是超文本标记语言，它是从事网页设计工作的基础，也是网站开发者必须熟练掌握的一门标记语言。应广大学员的强烈要求，我爱自学网特推出《HTML基础教程》，希望能得到广大学员的支持。

学习交流

标 题

第一课：HTML语言框架和相关标签95 1-1 学习html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML语言的整体框架135783 1-4 HTML语言的整体框架231727 1-5 行标签和段标签29866 1-6 文字属性标签28853 1-7 文字格式化标签26888 1-8 body标签27570 1-9 标题标签25212

第二课：常用标签代码0 2-1 图片37992 2-2 超链接127213 2-3 超链接223253 2-4 iframe标签25784 2-5 横线22900 2-6 列表22740 2-7 无序列表20544 2-8 有序列表21073 2-9 滚动标签23217 2-10 转义字符22227

第三课：表格标签83 3-1 表格31370 3-2 表格属性123819 3-3 表格属性223066

您说说看 我发明的...是不是很牛逼呀[滑稽]

总 高级版学习资料文件高达10G！！！

总 高级版学习高清视频资料的高达35G！！！

需要的话我后期会更新，所以关注我，学到的好东西都是你自己的哦[滑稽]

那么大概内容就更新到这里

本教程后期会逐一更新高清视频学习资料+超详细的学习资料教程！

别忘了四连！！【点赞 收藏 关注 投币】

我怕你到时候想找我都找不到了～[鲜花]

注：本人原创首发，未经允许禁止转载/抄袭，如有违法，本人将有权追究法律责任！！！

<video>是HTML5中的新标签，<video>标签的作用是在HTML页面中嵌入视频元素。<video>标签定义视频，比如电影片段或其他视频流。

video动态设置宽高：

video视频是通过编辑器在后台上传的，上传视频时编辑器要求必须传入视频的宽高，而且必须是数字，不能是百分比，传具体数字怎么适配各种型号的设备呢？

在前台显示视频的时候，所有的video标签都有设置好的width和height属性。

首先移除视频设置的宽高属性

　　$(function(){

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

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

　　})

然后在样式里设置视频的宽高为100%

　　video{width:100%;}

通过style样式设置video宽高会受到video标签的width和height属性的影响，因此把这些属性移除了。

<video>标签支持HTML的全局属性，支持HTML的事件属性。

以上就是酷仔今日整理的“Web前端基础教程：HTML5中的video动态怎么设置宽高”一文，希望对正在学习Web前端的同学提供参考。酷仔会持续更新Web前端教程及Python基础教程相关的内容，为有需求的同学提供学习资料。