最近我的视频播放浅学总结

最新推荐文章于 2024-08-15 09:33:26 发布
最新推荐文章于 2024-08-15 09:33:26 发布
阅读量461 收藏
点赞数
文章标签： 音视频 ffmpeg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/web2022050901/article/details/129307575
版权
作者在研究如何创建类似苹果同播共享功能时，探讨了hls.js、flv.js、dash.js和WebRTC等技术。最终选择了hls.js进行视频切片和播放，结合WebRTC处理操作同步，以实现低延迟且无需额外服务器的需求。在处理HEVCHDR视频时，遇到了解码问题，通过M2转码和SRS服务器实现了流畅播放。此外，还分享了JS面试题的资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为想做一个类似苹果的同播共享功能，这一段时间对音视频做了一些浅浅的学习，现简单总结记录。

我的需求是找到一个尽可能简单的方案来两人播放一段视频，并且能够进度和操作同步，所以基本不能有延迟，同时能够显示WebVTT字幕，最好不需要额外的服务器。

视频流方案

前端视频流主要是用的是hls.js，flv.js和dash.js，我最后使用了hls.js。

hls.js

hls.js多用于做在线视频播放，原理就是将大视频切片，分成几秒一个的小片段，这样只需要不停加载小片段就可以完整播放视频了。

使用ffmpeg来生成视频


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    

      

        

            

              
                
                  蚂蚁二娘
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
【五斗米】浅学线程与线程池

				
			

			

				

					m0_64210833的博客
				

				

					08-08
					
					1446
					
				

			

		

		

			
				
若为多继承，当多个父类中有重复的属性和方法时，子类的调用结果会含糊不清因此采用单继承。为什么是多实现呢？实现接口就是拓展类的功能，就算接口中有重复的方法也没有关系，因为实现接口，就必须重写接口中的方法。sleep()和 wait()的区别？1.sleep()方法是Thread（线程）类的静态方法。wait()方法是Object类的实例方法任何实例都能调用。2.sleep()方法不会释放锁，使线程进入TIMED_WAITING状态，线程休眠指定时间后自动唤醒。wait()方法。

			
		

	



                

            
              



	

		

			

				
					
python制作学生管理系统_Python——面向对象，简易学生信息管理系统

				
			

			

				

					weixin_39603050的博客
				

				

					11-24
					
					1781
					
				

			

		

		

			
				
一、概述1.1涉及到的知识点项目开发：创建项目，创建包，导入包；面向对象：静态方法，继承，内置函数，自定义函数；数据类型：列表，字典，字符串、列表、字典的转换和自动生成导向；异常处理：捕获异常；　文件操作：读，写；1.2需求分析（1）思考学员管理系统需要哪些功能？（2）思考可以将哪些功能对象化？（3）创建的对象可将功能方法化（函数化）吗？二、具体实现（1）创建项目：StudentManagerSy...

			
		

	



              


  
              

                


	

		

			

				
					
H5播放HLS之hls.min.js库

				
			

			

				

					lixiang987654321的专栏
				

				

					09-21
					
					7609
					
				

			

		

		

			
				
H5播放HLS之hls.min.js库视频推流H播放HLS
视频推流
为了产生HLS视频，我们可以借助srs来实现rtmp推流并生成HLS流，具体详细使用可以参考我之前的文章，这里不再赘述。
我们要实现web端播放传统的音视频，最重要的实现就是rtmp实时视频推送至srs集群，为了演示我这里只启动一个srs简单应用，重点放在web端播放相关技术的讲解，关于srs实时视频推送一块，我在《SRS直播集群方案》一文已经做了很详细的介绍，这里不再赘述。
首先，我们可以使用ffmpeg或者obs采集本地视频并推送到s

			
		

	





	

		

			

				
					
hls.min.js脚本

				
			

			

				

					07-08
				

			

		

		

			
				
基于MSE的HLS实现。

hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5  video标签和MediaSource Extensions。hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5  video标签和MediaSource Extensions。hls.js 是一个 JavaScript 库，实现了HTTP Live Streaming客户端，它依赖于HTML5  video标签和MediaSource Extensions。

			
		

	



		

			
		



	

		

			

				
					
hls.js下载m3u8视频播放hls.js

				
			

			

				

					fuxingsheng1的博客
				

				

					11-30
					
					8573
					
				

			

		

		

			
				
1.新建hls.min.js空文件

2.将下面内容复制到空文件中


!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Hls=e():t.Hls=e()}(this,function(){r

			
		

	





	

		

			

				
					
HLS.js：使用全解析

					
最新发布

				
			

			

				

					球球不吃虾WHR2349博客
				

				

					08-15
					
					8567
					
				

			

		

		

			
				
HLS.js是一个轻量级的JavaScript库，旨在为不支持原生HLS的浏览器提供兼容性。它通过解析MPEG-TS流并在客户端进行解码，使HTML5元素能够播放HLS内容。HLS.js利用了现代浏览器中的Media Source Extensions (MSE) 和 Encrypted Media Extensions (EME) API来实现这一目标。

			
		

	





	

		

			

				
					
Android 网络性能优化（3）复用连接池，android应用开发案例教程

				
			

			

				

					m0_66155412的博客
				

				

					01-30
					
					406
					
				

			

		

		

			
				
=======================================================================
1. Android 网络性能优化（1）概述
2. Android 网络性能优化（2）DNS优化
3. Android 网络性能优化（3）复用连接池
4. Android 网络性能优化（4）弱网优化

1. 概述
=======================================================================
复用连接池

			
		

	





	

		

			

				
					
C++ 性能优化篇三《测量性能》

				
			

			

				

					「 虚幻私塾」
				

				

					11-28
					
					3762
					
				

			

		

		

			
				
测量可测量之物，将不可测量之物变为可测量。 ——伽利略 • 伽利雷（1564—1642）

测量和实验是所有改善程序性能尝试的基础。本章将介绍两种测量性能的工具软件：分析 器和计时器软件。我将讨论如何设计性能测量实验，使得测量结果更有指导意义，而不是 误导我们。
最基本和最频繁地执行的软件性能测量会告诉我们“需要多长时间”。执行函数需要多长 时间？从磁盘读取配置文件需要多长时间？启动和退出程序需要多长时间？
这些测量问题的解答方法有时简单得令人觉得可笑。牛顿通过用物体掉落至地面的时间除 以他的心跳速度测量.

			
		

	





	

		

			

				
					
android h5 hls,H5播放HLS之hls.min.js库

				
			

			

				

					weixin_34458671的博客
				

				

					05-27
					
					801
					
				

			

		

		

			
				
视频推流为了产生HLS视频，我们可以借助srs来实现rtmp推流并生成HLS流，具体详细使用可以参考我之前的文章，这里不再赘述。我们要实现web端播放传统的音视频，最重要的实现就是rtmp实时视频推送至srs集群，为了演示我这里只启动一个srs简单应用，重点放在web端播放相关技术的讲解，关于srs实时视频推送一块，我在《SRS直播集群方案》一文已经做了很详细的介绍，这里不再赘述。首先，我们可以使...

			
		

	





	

		

			

				
					
hls协议的hls.js或者hls.min.js

				
			

			

				

					11-01
				

			

		

		

			
				
最新版本的ckplayer-x 直接支持了html5播放m3u8格式的视频，但是PC平台上使用h5播放器播放m3u8时，ckplayer-x内部需要加载一个hls.min.js。因为下载的ckplayer.zip安装包没有包含该文件，故从其他地方找到相关文件。

			
		

	





	

		

			

				
					
hls.min.js vedio

				
			

			

				

					09-26
				

			

		

		

			
				
hls.min.js 用于浏览器，uniapp视频拉流播放视频

			
		

	





	

		

			

				
					
一款用于在网页上播放视频的软件，本软件为开源软件，遵守开源协议：MIT

				
			

			

				

					05-22
				

			

		

		

			
				
ckplayer是一款用于在网页端播放视频的软件，支持mp4点播，,flv点播和直播，m3u8的点播和直播，ts直播，支持移动端，PC端；视频格式支持（支持mp4,flv,m3u8,ts等格式）；播放形式支持（支持点播、直播、直播+回放）；平台支持（支持移动端，PC端）。功能支持（支持使用js监听播放器的各种状态，支持使用js控制播放器的各种操作）；软件架构（本软件采用javascript编写核心代码，css文件定义播放器风格）。

			
		

	





	

		

			

				
					
videojs所需的JS工具

				
			

			

				

					03-30
				

			

		

		

			
				
主要提供的是JS：videojs-contrib-hls.min.js、video.min.js、video.js、videojs-ie8.js、videojs-ie8.min.js
用于播放HLS流视频

			
		

	





	

		

			

				
					
JS中Map和ForEach的区别

				
			

			

				

					10-18
				

			

		

		

			
				
本篇文章给大家详细分析了JS中Map和ForEach的区别以及用法上的不同之处，对此有兴趣的朋友参考学习下吧。

			
		

	





	

		

			

				
					
hls网页播放器实现

					
热门推荐

				
			

			

				

					zhaozhen的博客
				

				

					01-24
					
					1万+
					
				

			

		

		

			
				
hls网页播放器实现
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。本事记录内容只要是使用bootstrap的modal框实现点击按钮弹出视频框。播放的视频格式是hls(m3u8).video.js的详细使用方法可参考这里
1. 文件引入
<link hre...

			
		

	





	

		

			

				
					
hls.js

				
			

			

				

					Eighteen Z
				

				

					04-09
					
					3853
					
				

			

		

		

			
				
<script src="hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new H

			
		

	





	

		

			

				
					
解决HTML5 不能自动播放视频的问题

				
			

			

				

					Williams山石的博客
				

				

					05-19
					
					1万+
					
				

			

		

		

			
				
有个需求，客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码：



<div class='popup_video'>
        <video id="myVideo" style="z-index:-1" width="100%" -webkit-playsinline="true&a

			
		

	





	

		

			

				
					
videojs对hls直播和点播的支持m3u8

				
			

			

				

					软件需要灵魂
				

				

					06-15
					
					2181
					
				

			

		

		

			
				
纠正大家对video.js支持hls使用方式的误区，已直接支持hls，完美支持加密m3u8

			
		

	





	

		

			

				
					
零基础入门Oracle数据库：浅学指南

				
			

			

				

					
				

			

		

		

			
				
本压缩包包含了“03.wmv”文件，根据文件后缀名推测，这可能是一个视频文件，用于配合文字资料进行教学，使内容更加直观易懂。  知识点如下：  1. Oracle数据库简介 Oracle数据库是甲骨文公司开发的一款关系型数据库...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值