【html5插入透明Webm视频】

透明Webm可以用来干什么？可以做视频特效，或者网站特效，比如你背景图上面加个下雨或者下樱花得透明WebM图层，是不是变得高大上，Unity也默认支持这种vp8格式Webm播放，毕竟无版权争议de

首先，你得有个透明Webm，哪里找？tb搜索：透明粒子素材，格式一般为mov格式，带alpha通道
然后用cmd命令，结合ffmpeg转换为vp8或vp9编码得webm视频：
H:\iApp\小丸工具箱月儿\xiaowan_lune\tools\ffmpeg.exe -i “I:\ZUOYE_2021\Cinematic DustFX 001.mov” -c:v libvpx -pix_fmt yuva420p “I:\ZUOYE_2021\Cinematic DustFX 001.mov.webm”

这个ffmpeg.exe官网下载得不一定行哦，我下了一个第三方编译的，可以运行了，也许是官方版移除了webm的解码支持，各位可以搜索小丸工具箱月儿版，一个视频转换工具箱，里面有编译好得ffmpeg

然后在html里加载webm：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>背景图片放置</title>
</head>
<body><body background="taejune-kim-ah-so-good-1700-mark.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;">
<p><center>看，我在哪里</center></p>
<video src="Cinematic DustFX 001.mov.webm" width="640" height="480" controls="controls">您当前浏览器不支持HTMT5视频播放</video>
</body>
</html>

如果没有意外的话，素这样得（用Chrome打开）

转换好得demo下载：https://pan.baidu.com/s/1LewToNMLIVpPX9gtPK4_VQ 提取码: 8y7n

ref：https://blog.csdn.net/caidewei121/article/details/87885267
https://jalena.bcsytv.com/archives/1202

题外话:你也可以转换视频到yuv格式用dx或者ogl等硬件加速播放（转换de结果很大，你忍一忍）H:\C++\WaifuWallpaper20201225\WaifuWallpaper\ThirdParties\ffmpeg-n4.3.1-20-g8a2acdc6da-win64-lgpl-shared-4.3\bin\ffmpeg.exe -i “J:\Media[MMD] HAKU White Suit 弱音ハク - Pole dance.mp4” -ss 00:00:00 -t 87 -s 1280x720 -pix_fmt yuv420p i:/video1.yuv
测试（win10）：cd /d J:\Media
ffplay -f rawvideo -video_size 1280x720 -pix_fmt yuv420p yyyyy.yuv

PS：也可以用绝对路径

ref：
https://pianshen.com/article/316410940/
https://blog.csdn.net/sxc1989/article/details/85342175

【html5插入透明Webm视频】相关推荐

HTML5中如何显示视频HTML5视频播放
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 ...
HTML5 向网页嵌入视频和音频
来源 | http://www.fly63.com/article/detial/9503 现在很多网站上都会使用到视频和音频,html5 中提供了展示视频和音频的标签.向网页嵌入视频可以使用 < ...
H5实现透明通道视频
H5实现透明通道视频目前在做一个项目,项目要求是ui和视频相结合,做出动态效果.视频要在ui界面之上,但是又必须可以看见下面的ui界面,所有必须要求视频是透明的. 接着我查了一些资料,但是对h5如何 ...
html5给网页添加视频背景
html5给网页添加视频背景 1. 先插入如下代码: <video src="../video/2b.mp4" loop="loop" autoplay= ...
ffmpeg把透明背景图片合成透明背景视频
透明背景的照片序列: 照片序列:PNG可以有alpha(透明度)通道,可以是透明背景. 视频格式:在视频编辑中,大多数视频格式不支持透明度,但是有三种格式支持透明背景视频Quicktime Anima ...
HTML 学习笔记——插入音频、视频标签
目录前言一.音频标签:audio 1.audio简介 2.常用属性 3.兼容问题二.视频标签:video 1.video 总结前言今天学习了尚硅谷老师的html基础课程,主要是音视频的标签的 ...
html5新标签-音频视频
大家都有在网页中浏览视频的经历,但在Html5之前,对视频乃至音频都还没有一个标准.因此,在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是RealPlayer 或者 ...
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie,ie下不支持webrtc,无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> ...
html5 video微信浏览器视频不能自动播放
2019独角兽企业重金招聘Python工程师标准>>> html5 video微信浏览器视频不能自动播放一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的 ...
如何在notebook中的markdown中插入截取的图片_96编辑器教你如何在文章中插入图片、视频、音频！...
一.如何插入图片注意事项: 1.上传的每张图片大小请勿超过2M.如果文章内需要插入数量较多的图片,请先压缩每张图片至100kb左右,如果文章内插入较多的大图片可能会造成同步慢.生成不了图片,文章页面 ...

【html5插入透明Webm视频】

【html5插入透明Webm视频】相关推荐

最新文章

热门文章