阿里云直播 HTML5 模式，H5播放flv、视频的跨域配置

最新推荐文章于 2024-08-27 11:07:01 发布
最新推荐文章于 2024-08-27 11:07:01 发布
阅读量2.3w 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32898041/article/details/80287436
版权
本文介绍了阿里云直播中HTML5播放flv视频的跨域配置步骤，包括在PC端和移动端的差异，以及如何在OSS管理控制台设置跨域规则，以解决'Access-Control-Allow-Origin'问题。
摘要由CSDN通过智能技术生成

Aliplayer   播放器在PC端和HTML5需要引用的js是不一样的。

WEB 端js库 

 <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.5.6/skins/default/index.css" /> 
<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.5.6/prism-min.js"></script>

HTML5端js库 

 

    
 
  1. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.7.4/skins/default/index.css" /><script src="https://g.alicdn.com/de/prismplayer/1.7.4/prism-h5-min.js"></script>
    2. 

 

H5只支持MP4和m3u8，flv 格式。 // 初始化播放器

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qq_32898041
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
阿里云 Aliplayer高级功能介绍(八)：安全播放

				
			

			

				

					阿里云技术
				

				

					01-28
					
					1168
					
				

			

		

		

			
				
基本介绍

如何保障视频内容的安全，不被盗链、非法下载和传播，阿里云视频点播已经有一套完善的机制保障视频的安全播放:



更多详细内容查看点播内容安全播放，H5的Aliplayer对于上面的安全机制都是支持的，但是也有一些限制。

访问限制

访问限制主要是阿里云视频云提供的安全访问能力， 只需要云端配置， 播放器无需做额外的事情，并且拒绝访问的原因会通过“X-Tengine-Error”Res...

			
		

	



                

              
                



	

		

			

				
					
H5的video标签跨域.HTML的video标签跨域_跨域ajax

				
			

			

				

					12-24
				

			

		

		

			
				
H5的video标签跨域.HTML的video标签跨域
我们都知道HTML video标签能播放视频
但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?

			
		

	



                


  
              

                


	

		

			

				
					
阿里云视频点播本地调试跨域问题，阿里云视频点播跨域问题

				
			

			

				

					qq_25983579的博客
				

				

					08-18
					
					607
					
				

			

		

		

			
				
阿里云视频点播本地调试跨域问题，阿里云视频点播跨域问题

			
		

	





	

		

			

				
					
vcastr3网页FLV播放器开发与实现

					
最新发布

				
			

			

				

					weixin_42613017的博客
				

				

					08-27
					
					791
					
				

			

		

		

			
				
本文还有配套的精品资源，点击获取
 
 


 简介：vcastr3网页FLV播放器是一个用于在网页上播放FLV视频的软件包。本项目将深入探讨FLV格式、vcastr3技术以及网页嵌入，并通过实践任务指导学生开发和实现自己的vcastr3网页FLV播放器。学生将学习播放控制、自定义皮肤、流媒体服务等功能，并了解HTML5替代方案和系统要求。本项目旨在帮助学生掌握网页视频播放技术的原理和实...

			
		

	



		

			
		



	

		

			

				
					
视频直播的实现

				
			

			

				

					hanierming的博客
				

				

					10-09
					
					4960
					
				

			

		

		

			
				
由于公司需要开发一款直播软件，以前也并没有接触过直播这一方面，所以就来从0开始做一个直播，本着开放的原则，发此博文以供后者参阅。


视频直播服务提供商的选择：
在选择视频直播提供商的时候，目标选择有三家：七牛云、腾讯云与阿里云。由于七牛云以及腾讯云的视频直播需要审核，而且审核速度较慢，本次选择的是阿里云提供的视频直播的服务。阿里云的服务质量也是很可靠的。阿里云视频直播服务地址：https

			
		

	





	

		

			

				
					
flv.js 跨域访问 nginx-http-flv-moudle 开启basic authentication时遇到的问题

				
			

			

				

					wwyyxx26的专栏
				

				

					06-10
					
					5126
					
				

			

		

		

			
				
项目流程大概是这样的，浏览器从a服务器获取到流服务器地址和用户名密码，然后从流服务器上通过basic authentication取流

这里有两点:1、跨域问题 2 、要做访问验证

是开启nginx这边的basic authentication验证，这个网上的方法很多，不在累述了，网上找了一篇，看看就会了，改好后使用vlc取流，按要求输入用户名，密码就能取到流了



然后是flv.js的使用：在createPlayer的第二个参数config里加入basic authentication的http头.

			
		

	





	

		

			

				
					
H5 video跨域问题

				
			

			

				

					weixin_34390105的博客
				

				

					12-08
					
					4104
					
				

			

		

		

			
				
事情是这样的，今天上午下班前，朋友发我一个js文件，说视频不播放，核心代码大概是这样子的：

var player = document.createElement('video');
var source = document.createElement('source');
            player['id'] = 'videoplayer';
            p...

			
		

	





	

		

			

				
					
阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现（三）

				
			

			

				

					weixin_34124939的博客
				

				

					11-09
					
					2109
					
				

			

		

		

			
				
阿里云播放器SDK（ApsaraVideo for Player SDK）是阿里视频云端到云到端服务的重要一环，除了支持点播和直播的基础播放功能外，还深度融合视频云业务，支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。本文衔接上文，详细介绍web播放器的功能及实现。

一、基本概况及功能
播放器架...

			
		

	





	

		

			

				
					
H5直播之阿里云视频直播的实现

				
			

			

				

					NicolasLearner的博客
				

				

					05-16
					
					1288
					
				

			

		

		

			
				
转自https://blog.csdn.net/hanierming/article/details/52769424

由于公司需要开发一款直播软件，以前也并没有接触过直播这一方面，所以就来从0开始做一个直播，本着开放的原则，发此博文以供后者参阅。

视频直播服务提供商的选择：
在选择视频直播提供商的时候，目标选择有三家：七牛云、腾讯云与阿里云。由于七牛云以及腾讯云的视频直播需要审核，而且审核速度较慢，本次选择的是阿里云提供的视频直播的服务。阿里云的服务质量也是很可靠的。阿里云视频直播服务地址：https

			
		

	





	

		

			

				
					
html中嵌入flv视频直播,在html中嵌入flash对象实现flv播放

				
			

			

				

					weixin_32771227的博客
				

				

					06-03
					
					306
					
				

			

		

		

			
				
最近测试，需要把h264+acc的视频放到web以网页的方式播放。在ubuntu 14.04 chromium上，发现flashVars必须是下面这样的相对地址"/1.flv", 不能以http://开头。(没有斜杠，地址"1.flv"表示与player.swf在同一目录)classid与我上传的player.swf要对应[1]。虽然在两个地方指定了url, embed是不能省去的。codebas...

			
		

	





	

		

			

				
					
HTML5平台中跨域访问使用说明

				
			

			

				

					12-06
				

			

		

		

			
				
项目开发过程中会遇到一个项目区调取另一个项目的现象，就是所说的跨域问题。跨域问题一开始解决方法时改代码，浪费大量的工作量。后来就是查阅大量资料写的这么个文档

			
		

	





	

		

			

				
					
ARM32-Nginx服务，支持RTMP/HTTP-FLV推拉流，支持flv.js跨域拉流,支持web端跨域代理/上传文件

				
			

			

				

					01-14
				

			

		

		

			
				
ARM32-Nginx服务，支持RTMP/HTTP-FLV推拉流，支持flv.js跨域拉流,支持web端跨域代理/上传文件

			
		

	





	

		

			

				
					
H5中的flv播放器

				
			

			

				

					04-26
				

			

		

		

			
				
在HTML5中通过使用flv.js来实现flv的播放器，可以实现暂停、开始等功能；如果flv是直播流，则可以播放直播流。

			
		

	





	

		

			

				
					
MP3跨域音频频谱AS3播放器

				
			

			

				

					04-10
				

			

		

		

			
				
跨域音频频谱AS3播放器

演示地址
http://www.ymafy.com/forum.php?mod=viewthread&tid=1539

			
		

	





	

		

			

				
					
使用nginx做为http-flv服务如何解决跨域问题

				
			

			

				

					xiaoluer的专栏
				

				

					04-15
					
					5078
					
				

			

		

		

			
				
什么是跨域

跨域是指浏览器的同源策略限制，这个策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。如果一个请求url的协议、域名、端口三者之间任意一个与当前页面的url不同即为跨域。

如下图所示即为跨域时的报错：



使用nginx搭建http-flv服务

主要使用了nginx和nginx-http-flv-module模块，具体过程可参考：https://blog.cs...

			
		

	





	

		

			

				
					
html中嵌入flv视频直播,html中嵌入flv格式文件的代码

				
			

			

				

					weixin_33901995的博客
				

				

					06-03
					
					185
					
				

			

		

		

			
				
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"  >value="http://www.jb51.net/player/vcastr22.swf?vcastr_file=http://img.jb51.net/upload/3/2007/12/200...

			
		

	





	

		

			

				
					
html播放flv直播源码,使用flv.js实现HTML5播放FLV视频文件

				
			

			

				

					weixin_42510888的博客
				

				

					05-31
					
					2597
					
				

			

		

		

			
				
本文最后更新于 2017 年 11 月 1 日，其中的内容可能有所发展或发生改变，敬请注意。随着html5的普及，flv文件的播放成为了一个历史遗留问题，flv.js的出现解决了这样一个问题……为什么要这么做？这是一个历史遗留问题，早期网络播放器大量依赖于Flash，自然而然地，流媒体文件格式flv就成了网络最常用的流媒体格式。随着Flash遭到Adobe抛弃，移动端对Flash的不友好，之前的f...

			
		

	





	

		

			

				
					
阿里云直播

				
			

			

				

					zhuomox的博客
				

				

					11-28
					
					896
					
				

			

		

		

			
				
播放封面图片 需要处理跨域问题



    
    Title
    
    


    
    
        var player = new Aliplayer({
                id: "J_prismPlayer",
                autoplay: false,
                isLive

			
		

	





	

		

			

				
					
阿里云点播URL鉴权全攻略：跨域与PHP实现

				
			

			

				

					
				

			

		

		

			
				
在处理M3U8格式视频时，开发者需要特别注意跨域问题，通过文档和阿里云提供的工具进行正确的配置和管理，确保视频内容的安全分发。对于开发人员而言，理解这些步骤并能灵活应用，将有助于避免常见的部署陷阱和提升...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值