前端技术(13) : 点击flv全屏播放

最新推荐文章于 2023-12-21 17:10:00 发布
最新推荐文章于 2023-12-21 17:10:00 发布
阅读量617 收藏
点赞数
分类专栏： 前端 文章标签： 前端 arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lxinccode/article/details/132620127
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#fullscreen2 {
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.7);
				display: none;
				z-index: 9999;
			}
			
			#fullscreen2 video {
				display: block;
				margin-top: 100px;
				width: 80%;
				height: 80%;
			}
		</style>
	</head>
	<body>
		
			<button onclick="openFlv()">打开视频</button>
		<center>
			<div id="fullscreen2" onclick="closeFullscreen2()">
				<video id="fullscreenImg2" controls></video>
			</div>
		</center>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/flv.js@1.5.0/dist/flv.min.js"></script>
	<script>
		var flvPlayer;
		
		function openFlv(){
			openFullscreen2('http://1112.flv')
		}
		
		function openFullscreen2(url) {
			if (flvjs.isSupported()) {
				var fullscreenDiv = document.getElementById("fullscreen2");
		
				fullscreenDiv.style.display = "block";
		
				var videoElement = document.getElementById('fullscreenImg2');
				flvPlayer = flvjs.createPlayer({
					type: 'flv',
					url: url
				});
				flvPlayer.attachMediaElement(videoElement);
				flvPlayer.load();
				flvPlayer.play();
			}
		}
		
		function closeFullscreen2() {
			var fullscreenDiv = document.getElementById("fullscreen2");
			fullscreenDiv.style.display = "none";
			
			flvPlayer.pause(); // 暂停播放
			flvPlayer.unload(); // 卸载视频流
			flvPlayer.detachMediaElement(); // 解除video元素的附加
			flvPlayer.destroy(); // 销毁播放器实例
			flvPlayer = null;
		}
	</script>
</html>

Lxinccode
关注
专栏目录
前端在线播放flv视频
05-01
NULL 博文链接：https://lbovinl.iteye.com/blog/2393592
web视频播放实例（flv/mp4 )Demo 写路径直接可用
10-14
CKPlayer提供了丰富的API和自定义选项，可以轻松地在网页中嵌入和控制视频播放，包括播放、暂停、快进、快退、全屏等功能。 "help.htm"和"index.htm"很可能是帮助文档和主页面，它们将指导用户如何配置和使用这个...
前端播放flv的视频
brilliantSt的博客
02-14 6051
123
前端播放flv格式视频的播放器
pandafucker的博客
11-27 771
需要注意的是，如果video标签不加上muted属性，自动播放会失效。
前端页面播放直播流flv
qq_30908729的博客
01-11 730
前端页面播放直播流flv
【前端】视频video标签 全屏功能
qq_45236230的博客
08-11 1137
不同浏览器要不同的前缀 坑的一匹 //这个函数 就是绑定了按钮的函数 var fullScreenHandler=function(){ if (isElementFullScreen()){ exitFullscreen(); } else{ FullScreen(); } }; //进入全屏 function FullScreen() { var ele = video_class; // 注意 这里要填一个容器 就是你要让他全屏的容器 if (ele.request
FLV格式网页视频播放器，可全屏播放和静音，兼容主流浏览器
05-25
本项目提供的是一款针对FLV格式的网页视频播放器，它支持全屏播放和静音功能，并且能够很好地兼容主流的浏览器，为用户提供流畅、便捷的观看体验。 首先，我们要理解FLV格式的特点。FLV是Adobe Systems公司为Flash ...
asp.net2.0 页面实现播放FLV视频（源代码）
01-21
综上所述，实现ASP.NET 2.0页面播放FLV视频涉及前端的HTML和JavaScript集成，后端的ASP.NET代码处理，以及对Flash Player和视频文件的管理。在实际应用中，需要结合具体需求进行细致的开发和优化。
使用asp.net播放flv视频教程
"该资源提供了一种在ASP.NET前端播放FLV格式视频的方法，通过集成Flash播放器vcastr3.swf实现。演示代码中包含了如何配置FlashVars参数以加载视频源并设置全屏、自动播放等选项。此外，还展示了如何添加Logo插件以...
Vue结合XgPlayer.js实现flv视频播放功能
4. 最后，开发者可以配置XgPlay.js的相关参数来实现视频的播放控制，比如播放、暂停、调整音量、全屏播放等。需要注意的是，由于flv格式的视频需要特定的视频编解码器支持，因此在某些环境下可能需要配置相应的...
web浏览器播放http-flv协议的视频流
07-26
将本工程放在tomcat的webapps目录下，启动tomcat，作为web服务，在浏览器下播放http-flv协议的视频流
flv.js 测试demo (h5 video标签播放flv视频)
10-24
flv.js 测试demo 将整个文件夹放在web服务器目录下，可使用xampp搭建服务器，放在htdocs下，通过 http://localhost/flv 访问
js实现的万能flv网页播放器代码
10-22
主要介绍了js实现的万能flv网页播放器代码,以简单示例形式分析了JavaScript使用swfobject.js实现在线播放flv视频的相关技巧,需要的朋友可以参考下
flv.js html5 flv播放器 bilibili大神的最新版
12-21
flv.js html5 flv播放器 bilibili大神的最新版 十分好用
前端FLV视频直播解决方案
最新发布
jmszl1991的博客
12-21 2041
解决前端flv协议下直播视频流的播放
vue前端对接监控视频 FLV格式 （分屏的操作 单屏 ，四平 ，六屏）
id_EquinoxFlower的博客
08-03 3972
vue前端对接监控视频 FLV格式接触智慧园区，智慧工地，水泵站等项目之后，发现都有实时监控的对接，并且是可以多屏进行，就研究了相关的技术栈，找到了这个强大的播放器对前端还是很友好的，话不多说上干货！！！
flv 4 9 16 分屏 全屏
u010645489的博客
08-10 852
flv 4 9 16 分屏全屏 附完整代码
FLV视频类播放器全屏切换完整AS代码示例
mayan1976的博客
11-21 369
function setFullScreen() { //fscommand("fullscreen", true); if (_root.logoCoolRabbit._visible == false) { if (Stage["displayState"] == "normal") { fscommand("ful...
Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏)(可以作为遮罩来播放)
qq_40544338的博客
01-09 2006
目录 一、参考： 1、[AS3编程教学]如何加载并播放Flv视频 ①总结：good：很好用，并且能够实现，目前知道flv、mp4都可以播放；but：如果循环不断的播放某个视频时候容易造成黑屏，需要remove视频时候全部remove，再加载；下面是我修改编写的，以及需要注意的地方 二、自己制作 1、播放外部视频（传感器与物联网多多参考）（全屏播放） ①注意： ②代码：播放外部视频 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值