video标签实现简单视频背景+遇到问题(视频无法显示，不能自动播放)

最新推荐文章于 2023-09-05 16:32:02 发布
最新推荐文章于 2023-09-05 16:32:02 发布
阅读量1k 收藏 5
点赞数 1
原文链接：http://www.cnblogs.com/ellen-mylife/p/10712935.html
版权

最近看网上有一些网站首页背景是炫酷的视频背景，就想模拟一个

1.video标签简介

video标签定义视频，就是可以在网页上实现视频的播放，详情见http://www.w3school.com.cn/tags/tag_video.asp

<video src="视频地址">
您的浏览器不支持 video 标签。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
</video>

属性如下图：

2.简要的视频背景制作（代码意思见代码注释）

代码改一下视频的src就可以直接使用了

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频背景网页</title>
    <style type="text/css">
    .video_back{
        /*设置视频最小宽度和高度*/
        min-width: 100%;
        min-height: 100%;
        /**/
        width:auto;
        height:auto;
        /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
        position: fixed;
        /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
        left: 0;
        top: 0;
        /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
        z-index: -9999;
        
    }
    .wen{
    font-size: 30px;
    color: #fff;
    }
    </style>
</head>
<body>

<video class="video_back" src="./back.mp4" type="video/mp4"  muted autoplay="autoplay" loop="loop"> 
您的浏览器不支持
</video>
<div class="wen">这是一个简单的视频背景</div>    
</body>
</html>

3.遇到问题

<video class="video_back" src="./back.mp4" type="video/mp4"  muted autoplay="autoplay" loop="loop"> 
您的浏览器不支持
</video>

上面代码中有一些比较坑的地方

（1）

./back.mp4是我自己下载好的视频，原来的格式是.blv格式，可是这个格式video不支持，出不来视频，我就直接改了它的后缀，改成了.mp4，结果还是出不来，然后我网上找了解决问题的方法，发现没有加

 type="video/mp4"，我加了之后还是有问题，网页还是一片空白。再查了一下发现视频不能直接改后缀，一定要是原来的格式。所以一般还是不要直接改后缀，如果就想用这个视频的话，可以切网上找那些像格式工厂类的软件来转换格式。

（2）改好格式后，页面不是白的了，有视频了，我加了autoplay="autoplay"属性可是视频不自动播放，然后当然又是查找解决问题的方法啊，之后就发现了

muted
这个简单说加上之后视频就会静音，但是视频可以自动播放了，浏览器一般不会再用户不同意的情况下就播放出媒体声音，这是不允许的，所以有声音就不能自动播放，自动播放就没有声音

 

 
 
 
 

 

转载于:https://www.cnblogs.com/ellen-mylife/p/10712935.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_30439067
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
关于video标签移动端开发遇到的问题，获取视频第一帧，全屏，自动播放，自适应等问题...

				
			

			

				

					weixin_30488313的博客
				

				

					03-27
					
					2443
					
				

			

		

		

			
				
最近一直在处理video标签在IOS和Android端的兼容问题，其中遇到不少坑，绝大多数问题已经解决，下面是处理问题经验的总结：
 1.获取视频的第一帧作为背景图；
   技术：canvas绘图
  

window.onload = function(){   var video = document.getElementById('video');   //使用严格...

			
		

	



                

              
                



	

		

			

				
					
Web 端视频播放的常见问题及相应解决方案

					
最新发布

				
			

			

				

					eshine Lau 的博客
				

				

					04-17
					
					1243
					
				

			

		

		

			
				
视频播放失败
网络
跨协议拦截
CDN 无视频
CDN 鉴权失败
微信浏览器拦截
跨域问题
视频未转码
异常视频
浏览器环境不支持播放
浏览器不支持 Flash
浏览器不支持 MSE
浏览器不支持解码 H264 或者不支持播放 MP4、HLS 格式的视频
HLS 加密视频播放失败
获取 key 失败
解密失败
浏览器劫持视频播放
视频激活播放后强制全屏
视频无法被其他元素覆盖
播放器出现多余的图标
播放器出现广告、下载、推荐视频等内容
Android 端播放视频不会随着页面滑动
播放器显示尺寸
播放器出现黑

			
		

	



                


  
              

                


	

		

			

				
					
怎么把视频做成背景html,基于HTML5 video标签的背景视频效果

				
			

			

				

					weixin_29224309的博客
				

				

					06-03
					
					1005
					
				

			

		

		

			
				
直接贴代码~背景视频body{position:relative;overflow: hidden;margin:0;height:100%}.divbak{width: 100%;height: 100%;z-index: 1;-webkit-filter: blur(10px);-moz-filter: blur(10px);-ms-filter: blur(10px);filter: blu...

			
		

	





	

		

			

				
					
＜video＞标签在vue中动态绑定地址不能自动播放的问题

				
			

			

				

					qq_35368296的博客
				

				

					07-23
					
					6623
					
				

			

		

		

			
				
背景：记录下后端程序员在做企业门户时，标签在vue中使用遇到的问题。门户主要做一些炫酷界面，用视频标签展示展示一些mp4等格式的视频。
问题：动态绑定的地址视频不能自动播放
解决方案：
<video  preload="auto" controls="controls" muted loop style="width:500px;height: 500px;"  ref="videoId">
   <source :src="addressUrl" type="video/mp4">

			
		

	



		

			
		



	

		

			

				
					
【ios】H5页面＜video＞不显示从服务器端下载的视频

				
			

			

				

					emmmmmm的博客
				

				

					09-03
					
					464
					
				

			

		

		

			
				
一.前端

https://www.jianshu.com/p/c8ee8925c5c5





<video control>
 <source src="http://xxxx.mp4" type="video/mp4">
 <source src="http://xxxx.mp4" type="video/ogg">
 <source src="http://xxxx.mp4" type="video/webm">
</video>...

			
		

	





	

		

			

				
					
vue使用video播放m3u8视频首次进入不播放，刷新页面才播放

				
			

			

				

					ugbbfjk的博客
				

				

					06-20
					
					818
					
				

			

		

		

			
				
离开当前页面之前清空播放列表

			
		

	





	

		

			

				
					
videoPlayer组件一直处于在最上层的问题

				
			

			

				

					长生但酒狂的博客
				

				

					10-20
					
					4920
					
				

			

		

		

			
				
1.开启canvas透明权限，并且设置透明度为0
// 在main.js 加入以下代码：
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;  //加在 cc.game.run(); 前面
cc.director.setClearColor(new cc.Color(0,0,0, 0));  //加在cc.game.run(function); 回调里面

2. ...

			
		

	





	

		

			

				
					
HTML5 video（PC和移动端）自动播放学习指北

				
			

			

				

					萌新_zackXiong_勇闯前端~
				

				

					04-26
					
					1万+
					
				

			

		

		

			
				
一.背景

自动播放的问题在工作中时常遇到，针对自动播放做了一下简单的总结。

二.自动播放



自动播放就是未经用户的允许，播放音频或视频的行为。

在HTML里，通过给video标签， audio标签设置autoplay的属性，或者通过JS的代码去执行播放的逻辑自动播放经常会碰到这些问题：



<video src="xxx"autoplay></video>
...

			
		

	





	

		

			

				
					
test1_背景_vue_视频_ckplayer_

				
			

			

				

					10-04
				

			

		

		

			
				
这通常涉及到在HTML模板中添加`<video>`标签，并设置相应的属性，如`autoplay`、`loop`和`muted`，以实现自动播放、循环播放和静音播放。Vue的数据绑定机制允许我们将这些属性与Vue实例中的数据动态关联起来，从而...

			
		

	





	

		

			

				
					
移动端视频作为全屏背景播放

				
			

			

				

					Ricale的博客
				

				

					09-05
					
					282
					
				

			

		

		

			
				
在此之前搜寻了两天使用video标签的解决办法，x5-video-player-type和webkit-playsinline属性都不管用，出项的问题是，进入首页自动播放时会唤起手机的视频播放器（safari），还有不会自动播放的（微信内嵌网页）以下是我在react项目中涉及到的相关代码，可做相关参考。滴滴的移动端官网就是这样的办法实现的类似效果。最后终于遇到参考文章的办法，序列图片视频化。

			
		

	





	

		

			

				
					
WordPress 电影站 LoveVideo v1.0

				
			

			

				

					10-24
				

			

		

		

			
				
LoveVideo集成的国内，比较流行且兼容性比较好的网页播放器CKplayer，可以调用56视频、优酷、土豆、LeTV、音悦台以及酷6的视频，
输入播放页的地址即可，这里感谢“冰冷聚星”提供解析插件。当然，也可以自己嵌入HTML代码，直接调用优酷或者其他网站的分享代码

			
		

	





	

		

			

				
					
前端 video 元素总是浮在最上方，增加一个 z-index 属性

				
			

			

				

					Lucky小黄人的博客
				

				

					11-04
					
					1096
					
				

			

		

		

			
				
今天在 table 表格里每行渲染了一个视频，设置了首列固定，但是发现左右滑动表格时，当视频那列经过首列的位置时，视频会浮在首列元素上方，查了一下，用 z-index 设置 z 属性层级解决了。
在react ant-design 里 z-index写法是：zIndex ，把这个参数设置为0，这样在滑动页面时视频就不会浮在其他元素上面了，当然这只是我的情况用这个可以解决，好像网上很多情况用这个解...

			
		

	





	

		

			

				
					
使用IDEA创建javaweb项目时，使用video标签播放视频，在视频格式符合要求后，仍无法播放，报错 源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示。

				
			

			

				

					weixin_45855864的博客
				

				

					01-04
					
					3466
					
				

			

		

		

			
				
解决方法
更新一下maven。不知道原因，但是重新加载一下maven后，视频就可以播放了。



			
		

	





	

		

			

				
					
修改video标签默认样式问题video播放器样式优化；video播放器默认显示图片

				
			

			

				

					zhangzuying的博客
				

				

					12-07
					
					1万+
					
				

			

		

		

			
				
需求：

1.播放器可以支持上传默认封面图片
2.播放器的进度条长度拉长些,与播放器长度一样长，或者其他方式美化一下

首先需求1.播放器可以支持上传默认封面图片解决方案：
1.第一种方法可以直接在video标签中直接添加poster属性
<!DOCTYPE HTML>
<html>
<body>

<video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png">
you

			
		

	





	

		

			

				
					
html载入video的封面不变化,【前端】关于<video>标签控制封面图片的问题

				
			

			

				

					weixin_35171513的博客
				

				

					05-31
					
					1189
					
				

			

		

		

			
				
遇到的问题是这样的：微信H5页面，遍历标签做了一个视频列表。初始状态是所有视频都有封    面图片。点击第一个视频进行播放，当播放到一半时退出播放。此时的状态是第一个视频封面为播放退出前的画面，其他视频依旧显示为自己的封面图片。当点击第二个视频进行播放，播放到一半退出播放。此时的状态为第一个视频封面变黑。**想解决的问题：怎么在第二个视频播放退出时，第一个视频的封面依然保持为第二个视频播放前的状态...

			
		

	





	

		

			

				
					
HTML5中的video标签（无法显示画面）

					
热门推荐

				
			

			

				

					Iloveyougirls的博客
				

				

					02-26
					
					2万+
					
				

			

		

		

			
				
一、HTML5中的支持的浏览器及视频格式


 标签定义视频，比如电影片段或其他视频流。

目前， 元素支持三种视频格式：MP4、WebM、Ogg。




注意：IE8及以前的版本 不支持标签

重点来了，有时候我们使用的是MP4格式的视频，但是没有视频画面。

那是因为MP4也有很多编码格式，标签支持的格式如下：




MP4 = MPEG 4文件使用

			
		

	





	

		

			

				
					
关于html 中video标签视频不自动播放的问题

				
			

			

				

					burning Life 明之博客
				

				

					09-13
					
					2万+
					
				

			

		

		

			
				
今天做一个登陆页面的时候，背景放一个视频循环自动播放

于是我在video标签上添加了属性  autoplay="autoplay" loop="loop"

然而通过地址栏进去的时候，视频并没有自动播放，按一下F5才会自动播放

最后，找资料发现，添加  muted 属性，就可以通过地址栏进入网页的时候自动播放了

oh year!...

			
		

	





	

		

			

				
					
vue H5项目中使用video标签无法播放视频，播放按钮也点不了，屏幕是黑的，解决方案

				
			

			

				

					seeeeeeeeeee的博客
				

				

					08-29
					
					1万+
					
				

			

		

		

			
				
原始代码
<video src="@/video/qiang.mp4" controls="controls"></video>

显示结果
这样的，按钮都不能点，也不显示视频。

然后我测试发现我在我自己的私人项目中使用都是可以的，唯独放在公司的代码中就不行，我就怀疑是不是公司代码太老了或者有其他代码不知道在哪里影响我造成的的原因
解决办法
这样写，就是src前面加require引入，搞定！
<template>
  <div>
       <vid

			
		

	





	

		

			

				
					
video标签不显示视频只有进度条

				
			

			

				

					LingSnow1019的博客
				

				

					03-24
					
					2568
					
				

			

		

		

			
				
新需求的模块上有个上传视频并预览的功能，我自己用自己的电脑测试视频都能播放，但测试却指了我视频不能播放的bug，因为测试的视频跟我自测的都是mp4格式的，所以基本可以排除视频格式的问题。然后我去教程上查看了video标签才发现端倪

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

才知道原来还有视频编码这一说，然后我用qq影音查看了两部视频的编码


第一个是我电脑的视频，第二个是测试的视频。第二个很显然视频编码并不支持video标签mp4格式的编码规范
要想解决的话只能换播

			
		

	





	

		

			

				
					
video标签 自动播放视频

				
			

			

				

					07-29
				

			

		

		

			
				
video标签自动播放视频的原因是因为设置了autoplay属性。在HTML中，可以通过在video标签中添加autoplay属性来实现视频的自动播放。\[1\]在Vue.js中，可以通过在mounted()生命周期钩子函数中使用JavaScript代码来实现...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值