uni-app 开发H5页面添加视频字幕的解决方案

最新推荐文章于 2024-05-09 10:59:32 发布

River_yuan

最新推荐文章于 2024-05-09 10:59:32 发布

阅读量1.1k

点赞数 2

分类专栏： uni-app

本文链接：https://blog.csdn.net/River_yuan/article/details/116988414

版权

uni-app 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

由于uni-app的 video 标签已经被框架重置了，所以不支持里面添加source和track标签，故无法直接添加多种视频源和字幕，
下面是通过iframe的解决方案：

一、在最外层的static目录里添加常规 index.html页面，宽高设置为100%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{padding:0; margin:0;}
			html,body{width:100%; height:100%;}
			.video-box{width:100%; height:100%;}
		</style>
	</head>
	<body>
		<video class="video-box" x5-playsinline="" playsinline="" webkit-playsinline="" controls>
			<source size="480" src="./video_480p.mp4" type="video/mp4" />
			<source size="720" src="./video_720p.mp4" type="video/mp4" /> 
			<track default kind="captions" label="" src="./zimu.vtt" srclang="en" />
		</video>
	</body>
</html>

二、通过用标签引入该常规的html页面，设定宽高

<iframe src="./static/html/video.html" frameborder="0" width="100%" height="100%"></iframe>

经测试，这方法最值得欣慰的是点击全屏播放不会受到iframe的限制，所以可以放心使用（当然，如果是PC网页的话，也要注意兼容性）

River_yuan

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uni-app 开发H5页面添加视频字幕的解决方案

一、在最外层的static目录里添加常规HTML页面，宽高设置为100%<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.
复制链接

扫一扫

专栏目录