第3章第2节 任意任务间的切换

本文介绍了一个嵌入式实时操作系统(RTOS)如何通过引入任务控制块(TCB)实现任意多个任务间的灵活切换,无需修改操作系统核心代码,增强系统的通用性和独立性。

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

源代码请在https://github.com/ifreecoding/MbedRtos.git下载

第2节 任意任务间的切换

上一节我们使用2个固定的任务验证了操作系统任务切换的功能,但这些代码并不具有通用性,如果要扩充其它任务,就必须修改操作系统函数,这显然是不可接受的。操作系统作为独立于用户代码的部分,它的内部细节应该是不被用户所见的,是一个黑盒,需要做到用户只需要修改操作系统提供的接口文件里面的参数,调用接口函数就可以完全满足程序开发的要求。因此,在本节我们将对上节的代码做些改动,使其可以支持任意多个任务之间的互相切换,而又不需要修改Wanlix目录下的操作系统代码,仅仅是编写srccode目录下的用户代码,调用操作系统的接口函数即可,这样才真正实现了操作系统的独立性。

首先我们来看看任务切换函数——WLX_TaskSwitch。上节中,这个函数固定在两个任务之间切换,因此要实现可以切换到任何一个函数的功能就必须修改此函数,需要为这个函数增加一个入口参数,用这个入口参数来指明需要切换到的任务。WLX_TaskSwitch函数的主要功能是做好任务切换前的准备,将当前运行任务的栈指针和将要运行任务的栈指针存入到对应的全局变量中,上节中,为每个任务分别指定了guiTask21CurSp和guiTask2CurSp全局变量保存它们的当前栈指针,每个全局变量绑定到了任务,因此,这个入口参数还必须能够关联到任务的栈指针。

为此,我们引入TCB的概念,在操作系统里这是一个非常重要的概念。TCB是Task Control Block的缩写,意为任务控制块,与任务控制相关的重要信息都放被到TCB里。TCB是一个结构体,每个任务都拥有一个TCB ,可以把每个任务的与任务控制相关的结构都放入到它的TCB中,因此我们可以将任务当前的栈指针保存到它的TCB中,到目前为止,TCB格式如下:

typedef struct w_tcb

{

    U32 uiTaskCurSp;

}W_TCB;

TCB结构不只是这么简单,只是到目前为止就是这么简单,随着操作系统功能的不断完善,TCB也会不断的增加它的结构。

我们可以考虑将TCB放到任务的栈中。当任务创建时在栈的开始处保留一块内存作为TCB的存放空间,TCB之后的栈空间才作为真正的栈使用,这样,任务的TCB也就与任务绑定到了一起,每个TCB就可以代表一个任务。由于ARM芯片是线性地址空间,也就是说每个内存地址都是唯一的,因此每个任务堆栈的开始地址也就是唯一的,因此每个TCB的地址也就是唯一的了,这样我们就可以使用TCB的地址来代表各个不同的任务。

图 17  TCB在栈中的位置

有了TCB,下面我们来修改WLX_TaskSwitch函数。修改很简单,只是将TCB指针作为入口参数,在函数里替换掉原来与任务相关的全局变量,修改后的函数如下:

00107  void WLX_TaskSwitch(W_TCB* pstrTcb)

00108  {

00109      

00111      gpuiCurTaskSpAddr = &gpstrCurTcb->uiTaskCurSp;

00112  

00113      

00114      guiNextTaskSp = pstrTcb->uiTaskCurSp;

00115  

00116      

00117      gpstrCurTcb = pstrTcb;

00118  

00119      WLX_ContextSwitch();

00120  }

00107行,入口参数pstrTcb是将要运行任务的TCB指针,准备切换到该任务运行。

00111行,将当前运行任务的TCB中保存当前栈指针变量的地址存入全局变量gpuiCurTaskSpAddr中。

00114行,将将要运行任务的TCB中保存当前栈指针的变量,也就是当前的栈指针,存入全局变量guiNextTaskSp中。

00117行,将全局变量gpstrCurTcb 更新为将要运行任务的TCB,为下次任务切换做准备。

00119行,调用汇编函数WLX_ContextSwitch执行具体的寄存器备份、恢复操作。

同理,WLX_TaskStart函数也需要做类似的变量替换,不再介绍,读者自行分析。

00127  void WLX_TaskStart(W_TCB* pstrTcb)

00128  {

00129      

00130      guiNextTaskSp = pstrTcb->uiTaskCurSp;

00131  

00132      

00133      gpstrCurTcb = pstrTcb;

00134  

00135      WLX_SwitchToTask();

00136  }

由于增加了TCB,因此必须修改任务初始化函数。从本节开始,所有的任务将采用WLX_TaskCreate函数创建,在WLX_TaskCreate函数内分别对TCB和栈进行初始化。

00018  W_TCB* WLX_TaskCreate(VFUNC vfFuncPointer, U8* pucTaskStack, U32 uiStackSize)

00019  {

00020      W_TCB* pstrTcb;

00021  

00022      

00023      if(NULL == vfFuncPointer)

00024      {

00025          

00026          return (W_TCB*)NULL;

00027      }

00028  

00029      

00030      if((NULL == pucTaskStack) || (0 == uiStackSize))

00031      {

00032          

00033          return (W_TCB*)NULL;

00034      }

00035  

00036      

00037      pstrTcb = WLX_TaskTcbInit(pucTaskStack, uiStackSize);

00038  

00039      

00040      WLX_TaskStackInit(pstrTcb, vfFuncPointer);

00041  

00042      return pstrTcb;

00043  }

00018行,函数返回值是被创建任务的TCB指针;入口参数vfFuncPointer是创建任务所使用的函数;入口参数pucTaskStack是创建任务所使用的栈地址,是栈的低地址;入口参数uiStackSize是栈的大小。

00023行,对入口参数判断,如果函数指针为空,则返回NULL空指针代表创建任务失败。在C语言里,指针为NULL(也就是0)代表无效指针,因为0地址的内存一般都是中断向量表的复位向量,正常使用指针时是不会指向这里的。

00030行,对入口参数判断,如果栈指针为NULL或者栈大小为0,则返回失败。

00037行,调用WLX_TaskTcbInit函数初始化任务的TCB,并得到当前任务的TCB指针。

00040行,调用WLX_TaskStackInit函数初始化当前的任务栈。

00042行,任务创建成功,返回当前任务的TCB。以后就可以使用这个返回值来代表这个任务了。

目前的TCB比较简单,只有一个保存栈地址的变量,在WLX_TaskTcbInit函数里就是来初始化这个变量的,并返回TCB指针。

00051  W_TCB* WLX_TaskTcbInit(U8* pucTaskStack, U32 uiStackSize)

00052  {

00053      W_TCB* pstrTcb;

00054      U8* pucStackBy4;

00055  

00056      

00057      pucStackBy4 = (U8*)(((U32)pucTaskStack + uiStackSize) & 0xFFFFFFFC);

00058  

00059      

00060      pstrTcb = (W_TCB*)(((U32)pucStackBy4 - sizeof(W_TCB)) & 0xFFFFFFFC);

00061  

00062      

00063      pstrTcb->uiTaskCurSp = (U32)pstrTcb;

00064  

00065      return pstrTcb;

00066  }

00051行,函数返回值是被创建任务的TCB指针,创建任务后这个TCB就代表该任务;pucTaskStack是任务的栈地址,是栈的低地址;uiStackSize是栈的大小。

00057行,确定栈顶地址。“(U32)pucTaskStack + uiStackSize”是栈顶地址,由于栈必须是4字节对齐,因此再通过“& 0xFFFFFFFC”操作,从栈顶向下寻找4字节对齐的地址作为栈顶地址。

00060行,确定TCB地址。“(U32)ucStackBy4 - sizeof(W_TCB)”操作,从栈中减去存放TCB的空间,再通过“& 0xFFFFFFFC”操作,向下寻找4字节对齐的地址作为存放TCB的起始地址,这个也是任务调度时使用的栈顶地址。

00063行,初始化TCB中的变量,保存任务的栈指针。

00065行,返回任务的TCB指针。

TCB的引入也需要对WLX_TaskStackInit函数做简单的修改,由于该函数只是简单使用TCB替换了原来专用的全局变量,没有大的改动,就不做过多介绍了,读者可以对比上节的函数自己分析。

00074  void WLX_TaskStackInit(W_TCB* pstrTcb, VFUNC vfFuncPointer)

00075  {

00076      U32* puiSp;

00077  

00078      

00079      puiSp = (U32*)pstrTcb->uiTaskCurSp; 

00080  

00081      *(--puiSp) = (U32)vfFuncPointer;    

00082      *(--puiSp) = pstrTcb->uiTaskCurSp;  

00083      *(--puiSp) = 0;                     

00084      *(--puiSp) = 0;                     

00085      *(--puiSp) = 0;                     

00086      *(--puiSp) = 0;                     

00087      *(--puiSp) = 0;                     

00088      *(--puiSp) = 0;                     

00089      *(--puiSp) = 0;                     

00090      *(--puiSp) = 0;                     

00091      *(--puiSp) = 0;                     

00092      *(--puiSp) = 0;                     

00093      *(--puiSp) = 0;                     

00094      *(--puiSp) = 0;                     

00095      *(--puiSp) = 0;                     

00096      *(--puiSp) = MODE_USR;              

00097  

00098      

00099      pstrTcb->uiTaskCurSp = (U32)puiSp;

00100  }

经过上述修改操作系统就具有通用性了,无论建立多少个任务都无需修改操作系统的代码,只要为任务分配一个栈空间,使用WLX_TaskCreate函数就可以创建任务,并可以使用这个任务的TCB指针作为入口参数,调用WLX_TaskSwitch函数就可以切换到这个任务。

另外说一点,创建任务时,需要用户先用全局变量为所创建的任务申请一个任务栈空间,将它的起始地址和大小作为参数传递给WLX_TaskCreate函数来创建任务。如果能将申请任务栈的操作封装到WLX_TaskCreate函数里面就会更方便一些,但我在GNU环境下没有找到配置堆(heap)的方法(谁知道请在论坛上反馈一下,谢谢!),因此无法在WLX_TaskCreate函数里使用C函数库里的malloc函数从堆中申请任务栈。如果使用自己编写的堆函数则不如C库函数的方便,兼容性也不好,因此这里需要用户自己申请任务的栈空间。后面在Cortex内核芯片上,我们将换一个编译器,到那时候再完善这个功能。

在看最终效果前,我们再对任务切换过程中寄存器备份、恢复操作做最后一点优化。上节我们使用WLX_ContextSwitch函数完成任务寄存器入栈、出栈及最后跳转的操作,这样做存在2个问题:

1. 每次执行任务切换时都需要多执行2条汇编指令,来判断是否是从非操作系统状态切换到操作系统状态,请参考上节WLX_ContextSwitch函数的00024行和00025行。

2. 在程序从非操作系统状态切换为操作系统状态时,没有必要将芯片寄存器保存到系统栈中。

为此,我们将原有的WLX_ContextSwitch函数拆分成2个函数,WLX_ContextSwitch函数和WLX_SwitchToTask函数。WLX_ContextSwitch函数仍被WLX_TaskSwitch函数调用,用于每次任务切换,WLX_SwitchToTask函数被WLX_TaskStart函数调用,用于第一次任务切换。

这两个汇编函数没有实质性的改动,不再详细介绍,请读者自行分析。

00012      .func WLX_ContextSwitch

00013  WLX_ContextSwitch:

00014  

00015      @保存当前任务的堆栈信息

00016      STMDB  R13, {R0-R14}

00017      SUB    R13, R13, #0x3C

00018      MRS    R0, CPSR

00019      STMDB  R13!, {R0}

00020  

00021      @保存当前任务的指针值

00022      LDR    R0, =gpuiCurTaskSpAddr

00023      LDR    R1, [R0]

00024      STR    R13, [R1]

00025  

00026      @获取将要运行任务的指针

00027      LDR    R0, =guiNextTaskSp

00028      LDR    R13, [R0]

00029  

00030      @获取将要运行任务的堆栈信息并运行新任务

00031      LDMIA  R13!, {R0}

00032      MSR    CPSR, R0

00033      LDMIA  R13, {R0-R14}

00034      BX     R14

00035  

00036      .endfunc

00043      .func WLX_SwitchToTask

00044  WLX_SwitchToTask:

00045  

00046      @获取将要运行任务的指针

00047      LDR    R0, =guiNextTaskSp

00048      LDR    R13, [R0]

00049  

00050      @获取将要运行任务的堆栈信息并运行新任务

00051      LDMIA  R13!, {R0}

00052      MSR    CPSR, R0

00053      LDMIA  R13, {R0-R14}

00054      BX     R14

00055  

00056      .endfunc

至此就完成了本节代码的修改。在测试代码里我们建立3个任务,TEST_TestTask1、TEST_TestTask2和TEST_TestTask3,并将它们的TCB保存到全局变量gpstrTask1Tcb、gpstrTask1Tcb 和gpstrTask1Tcb 中,供任务切换时使用。

00020  S32 main(void)

00021  {

00022      

00023      DEV_HardwareInit();

00024  

00025      

00026      gpstrTask1Tcb = WLX_TaskCreate((VFUNC)TEST_TestTask1, gaucTask1Stack,

00027                                     TASKSTACK);

00028      gpstrTask2Tcb = WLX_TaskCreate((VFUNC)TEST_TestTask2, gaucTask2Stack,

00029                                     TASKSTACK);

00030      gpstrTask3Tcb = WLX_TaskCreate((VFUNC)TEST_TestTask3, gaucTask3Stack,

00031                                     TASKSTACK);

00032  

00033      

00034      WLX_TaskStart(gpstrTask1Tcb);

00035  

00036      return 0;

00037  }

00044  void TEST_TestTask1(void)

00045  {

00046      while(1)

00047      {

00048          DEV_PutString((U8*)"\r\nTask1 is running!");

00049  

00050          DEV_DelayMs(1000);              

00051  

00052          WLX_TaskSwitch(gpstrTask3Tcb);  

00053      }

00054  }

00061  void TEST_TestTask2(void)

00062  {

00063      while(1)

00064      {

00065          DEV_PutString((U8*)"\r\nTask2 is running!");

00066  

00067          DEV_DelayMs(2000);              

00068  

00069          WLX_TaskSwitch(gpstrTask1Tcb);  

00070      }

00071  }

00078  void TEST_TestTask3(void)

00079  {

00080      while(1)

00081      {

00082          DEV_PutString((U8*)"\r\nTask3 is running!");

00083  

00084          DEV_DelayMs(3000);              

00085  

00086          WLX_TaskSwitch(gpstrTask2Tcb);  

00087      }

00088  }

这3个任务在循环运行,向串口打印数据,每间隔一段时间切换到另外一个任务继续运行。TEST_TestTask1任务运行时向串口打印“Task1 is running!”代表TEST_TestTask1任务开始运行,1秒后主动切换到TEST_TestTask3任务,TEST_TestTask3任务运行时向串口打印“Task3 is running!”代表TEST_TestTask3任务开始运行,3秒后主动切换到TEST_TestTask2任务,TEST_TestTask2任务运行时向串口打印“Task2 is running!”代表TEST_TestTask2任务开始运行,2秒后主动切换到TEST_TestTask1任务,如此反复循环。

编译本节代码,串口打印如下图:

图 18  可创建任意多个任务的运行结果

    读者也可通过本节的视频观察这3个任务的动态执行过程,读者也可以自行增加任务在单板上运行一下,体验本节的收获!

<think>我们参考之前的讨论和引用的内容,实现以下目标:1.视频初始化为静音状态以实现自动播放2.用户交互(点击)后解除静音并播放根据引用[1]:浏览器要求视频初始化为静音才能自动播放,所以我们设置muted属性。同时,为了处理用户交互后解除静音,我们需要在用户点击时尝试将muted设为false并播放(如果播放失败的话,可能需要重新触发播放)。另外,引用[3]提到,要注意与其他库的冲突,因此我们在编写代码时尽量保持独立,避免使用可能冲突的方法。步骤:1.获取视频元素。这里用户提到了包含class=&#39;mv-player&#39;的HTML结构,我们假设这个class是在一个video元素上,或者是一个容器。由于没有具体说明,我们假设是video元素。2.如果找不到该元素,则可能需要创建,但根据需求,应该是已经存在的。注意:自动播放策略要求:-视频必须静音才能自动播放(muted=true)-有些浏览器需要设置playsinline(移动端避免全屏)代码思路:-设置视频为静音(muted)和自动播放(autoplay),并设置playsinline属性。-监听整个文档的点击事件(或特定元素的点击事件),在点击时解除静音(设置muted=false)并尝试播放(如果视频没有播放的话,因为自动播放可能因为策略失败)。但是,由于自动播放策略可能在不同浏览器表现不同,我们可以在用户交互时再尝试播放,同时解除静音。改进:我们可以在初始化时尝试静音播放,然后在用户交互时解除静音并播放(如果已经播放了,解除静音即可)。由于用户可能没有播放(比如在Safari中,自动播放被阻止),所以我们需要在用户交互时再次尝试播放。具体步骤:1.初始化视频元素,设置autoplay,muted,playsinline属性。2.设置一个标记,记录是否已经成功开始播放(因为静音播放可能成功,也可能失败)。3.监听用户交互(点击),然后:设置muted为false(解除静音)如果视频没有播放(比如自动播放失败),那么调用play()方法。注意:解除静音后,有些浏览器可能会因为自动播放策略不允许而没有声音,但是用户交互后是允许播放声音的,所以我们解除静音操作在用户交互事件中是安全的。代码实现:由于用户要求为class=&#39;mv-player&#39;的元素添加,我们假设这个class在video元素上,或者我们在这个容器内部的video元素?这里我们假设是video元素。如果mv-player是容器,那么我们在容器内寻找video元素。如果直接是video元素,那就直接用。我们先按容器内寻找video元素的方式,如果找不到,再尝试将mv-player作为video元素。同时,我们也要注意,可能已经有多个mv-player元素,这里我们只处理第一个。但是,根据需求,可能只有一个。代码:我们使用事件委托的方式,因为用户交互可能是点击页面任意位置,所以我们可以监听整个文档的点击。但是,为了更精确,我们可以只监听mv-player元素的点击,但用户可能在页面上其他位置点击,所以这里我们按需求,监听整个文档的点击。不过要注意:有些浏览器要求播放操作必须由用户事件触发,所以我们可以在用户点击时再解除静音。我们按照以下步骤:1.初始化视频元素(设置属性)2.尝试静音自动播放(如果浏览器允许)3.监听用户点击事件,在用户点击时解除静音并尝试播放(如果之前没播放成功)但是,由于自动播放可能失败,我们在用户点击时还要处理播放,所以我们可以这样:在用户点击时:如果视频处于暂停状态(说明自动播放失败了),那么调用play()同时解除静音(设置muted=false)因此,我们需要在初始化后记录播放状态。我们可以使用:videoElement.play().catch(error=>{自动播放失败,我们记录状态})然后在用户点击时检查。但是,为了简化,我们并不需要记录播放状态,而是直接检查视频的paused属性(自动播放成功时,paused为false)。因此,我们可以这样写:代码:```javascriptdocument.addEventListener(&#39;DOMContentLoaded&#39;,function(){//获取mv-player元素constmvPlayer=document.querySelector(&#39;.mv-player&#39;);if(!mvPlayer){console.error(&#39;未找到.mv-player元素&#39;);return;}//查找内部的video元素,如果mvPlayer自身是video,那么直接使用letvideoElement=mvPlayer.tagName===&#39;VIDEO&#39;?mvPlayer:mvPlayer.querySelector(&#39;video&#39;);if(!videoElement){console.error(&#39;未在.mv-player元素内找到video元素&#39;);return;}//设置初始属性:静音、自动播放、内联播放(移动端)videoElement.muted=true;videoElement.autoplay=true;videoElement.setAttribute(&#39;playsinline&#39;,&#39;&#39;);videoElement.setAttribute(&#39;webkit-playsinline&#39;,&#39;&#39;);//兼容旧版ios//尝试播放(静音状态下自动播放,可能失败)videoElement.play().catch(err=>{console.warn(&#39;自动播放失败,等待用户交互。&#39;);//这里我们可以记录自动播放失败,然后显示一个提示让用户点击?//根据需求,我们不需要显示提示,所以直接等待用户交互});//用户交互事件(点击)后解除静音并播放document.addEventListener(&#39;click&#39;,functionunlockAudio(){//解除静音videoElement.muted=false;//如果视频是暂停状态,尝试播放if(videoElement.paused){videoElement.play().catch(err=>{console.error(&#39;用户交互后播放失败:&#39;,err);});}//可选:移除事件监听,避免多次执行(只需要一次交互)document.removeEventListener(&#39;click&#39;,unlockAudio);});});```注意:上述代码中,我们只监听一次点击事件,一旦用户点击,我们就移除事件监听。这是因为只需要一次用户交互来解锁音频。但是,如果后续需要重新锁定?不需要,所以一次就够。但是,如果视频还没有加载完成,用户点击后可能播放失败。所以我们可能需要考虑在视频加载完成后再尝试播放,或者等待用户点击时再处理。不过,我们的逻辑是:在用户点击时,如果视频暂停(说明之前没播放成功)就播放。所以即使视频没有加载完成,用户点击时播放也会等待加载。另外,自动播放失败可能是因为视频没有加载完成,所以我们在用户点击时尝试播放是合理的。最后,如果用户点击时视频已经在播放(因为自动播放成功了),那么我们就只需要解除静音。因此,这个方案可以满足需求。但是,我们也要注意,有些浏览器不允许自动播放(即使静音)?但是主流的Chrome和Safari都支持静音自动播放。如果担心自动播放被阻止,我们可以在用户交互时再调用播放(包括静音自动播放失败的情况)。另外,引用[1]也提到需要测试主流浏览器,所以我们这里做了兼容处理。同时,我们设置webkit-playsinline是为了兼容旧版iOSSafari。最后,关于引用[2]和[3],这里没有使用videojs,所以不需要担心插件冲突。如果后续需要集成videojs,则代码可能需要调整。所以,我们给出以上实现。如果用户需要,我们可以添加一个提示,告诉用户点击页面以启用声音(在自动播放失败时)。但是用户没有要求,这里就不添加了。我们按照用户要求实现了初始静音和用户交互后解除静音。注意:由于浏览器的安全策略,有些情况下(比如iOSSafari)必须在用户手势事件中触发播放,所以我们使用点击事件是安全的。请将以上代码添加到页面中。另外,如果用户希望在视频元素上点击时播放,而不是整个文档,可以将事件监听绑定在mvPlayer上,但是考虑到用户可能在页面任意位置点击,我们监听整个文档。修改:事件监听改为绑定在document上,这样用户点击页面任意位置都可以。但是,如果页面上有其他需要点击的地方,可能会误触发,但是只触发一次,而且是在用户第一次点击页面时,所以问题不大。如果用户希望更精确,可以将事件绑定在视频容器上(mvPlayer),那么只需要将事件监听器的绑定对象改为mvPlayer。我们根据用户需求调整:用户要求的是“用户交互”,没有指定范围,所以我们用整个文档。代码如上。</think> # 视频播放控制实现方案:初始静音 & 用户交互解锁 根据需求,我将实现一个视频播放解决方案,让视频初始化为静音自动播放,并在用户交互后解除静音。 以下是完整的HTML实现方案: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频播放控制 - 静音与解锁</title> <style> body { font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f0f5ff; color: #333; } .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 30px; position: relative; } h1 { color: #2563eb; text-align: center; margin-top: 0; } .mv-player { width: 100%; max-height: 60vh; border-radius: 8px; overflow: hidden; background: #000; margin: 20px 0; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .controls { display: flex; justify-content: center; gap: 15px; margin: 20px 0; flex-wrap: wrap; } button { background: #2563eb; color: white; border: none; padding: 12px 24px; border-radius: 50px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } button:hover { background: #1d4ed8; transform: translateY(-2px); } button.secondary { background: #64748b; } .unmute-hint { background: rgba(37, 99, 235, 0.9); color: white; padding: 15px 20px; border-radius: 50px; position: absolute; top: 20px; right: 20px; z-index: 10; animation: pulse 2s infinite; cursor: pointer; display: flex; align-items: center; gap: 10px; } .unmute-hint:hover { background: #2563eb; } .status { background: #f8fafc; padding: 20px; border-radius: 8px; margin-top: 30px; border-left: 4px solid #2563eb; } .code-block { background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 8px; margin-top: 25px; font-family: &#39;Courier New&#39;, monospace; overflow-x: auto; } .explanation { margin-top: 30px; background: #f8fafc; padding: 20px; border-radius: 8px; } .highlight { color: #ef4444; font-weight: 500; } .icon { font-size: 1.2em; vertical-align: middle; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } </style> </head> <body> <div class="container"> <h1>视频播放控制示例</h1> <div class="mv-player"> <!-- 视频将通过JavaScript动态添加 --> </div> <div class="controls"> <button id="toggleMuteBtn"> <span class="icon">🔇</span> <span>解/关声音</span> </button> <button id="togglePlayBtn" class="secondary"> <span class="icon">⏯️</span> <span>暂停/播放</span> </button> </div> <div class="status"> <h3>当前播放状态</h3> <p>静音状态: <strong id="muteStatus">是</strong></p> <p>播放状态: <strong id="playStatus">正在播放...</strong></p> </div> <div class="explanation"> <h3>实现原理说明</h3> <p>本解决方案符合现代浏览器的自动播放策略:</p> <ol> <li><span class="highlight">初始静音自动播放</span>:视频加载时设置为静音状态,满足浏览器的自动播放要求[^1]</li> <li><span class="highlight">用户交互解锁声音</span>:用户点击页面后解除静音状态(同时触发播放)</li> <li><span class="highlight">跨浏览器兼容</span>:处理了Safari和Chrome的不同策略[^1]</li> <li><span class="highlight">降级处理</span>:如果自动播放失败,提供手动控制按钮</li> </ol> </div> <div class="code-block"> // 核心JavaScript代码<br><br> // 1. 初始化视频<br> const video = document.createElement(&#39;video&#39;);<br> video.src = &#39;https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4&#39;;<br> video.muted = true; // 初始静音<br> video.autoplay = true;<br> video.setAttribute(&#39;playsinline&#39;, &#39;&#39;); // 移动端避免全屏<br> <br> // 2. 用户交互时请求声音权限<br> document.body.addEventListener(&#39;click&#39;, async () => {<br> &nbsp;&nbsp;try {<br> &nbsp;&nbsp;&nbsp;&nbsp;await video.play(); // 交互后解除静音<br> &nbsp;&nbsp;&nbsp;&nbsp;video.muted = false;<br> &nbsp;&nbsp;&nbsp;&nbsp;// 更新状态显示<br> &nbsp;&nbsp;} catch (err) {<br> &nbsp;&nbsp;&nbsp;&nbsp;console.error("音频解锁失败:", err);<br> &nbsp;&nbsp;}<br> });<br> </div> </div> <script> // 页面加载完成后执行 document.addEventListener(&#39;DOMContentLoaded&#39;, () => { // 1. 创建视频元素 const videoContainer = document.querySelector(&#39;.mv-player&#39;); const video = document.createElement(&#39;video&#39;); video.src = &#39;https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4&#39;; video.muted = true; // 初始静音 video.autoplay = true; // 自动播放 video.controls = true; // 显示原生控制条 video.style.width = &#39;100%&#39;; video.style.height = &#39;100%&#39;; video.setAttribute(&#39;playsinline&#39;, &#39;&#39;); // 在移动设备上避免全屏播放 video.classList.add(&#39;mv-player-video&#39;); // 添加视频到容器 videoContainer.appendChild(video); // 2. 创建解锁提示 const unlockHint = document.createElement(&#39;div&#39;); unlockHint.className = &#39;unmute-hint&#39;; unlockHint.innerHTML = &#39;🔔 点击此处解锁声音&#39;; // 点击提示同样解除静音 unlockHint.addEventListener(&#39;click&#39;, () => { document.body.click(); // 触发文档点击事件 }); document.body.appendChild(unlockHint); // 3. 用户交互时请求声音权限 let soundUnlocked = false; document.body.addEventListener(&#39;click&#39;, async () => { try { // 如果视频是暂停状态,先播放 if (video.paused) { await video.play(); } // 解除静音 video.muted = false; soundUnlocked = true; // 更新状态显示 document.getElementById(&#39;muteStatus&#39;).textContent = &#39;否&#39;; // 移除提示(动画结束后) unlockHint.style.opacity = &#39;0&#39;; unlockHint.style.transition = &#39;opacity 0.5s ease&#39;; setTimeout(() => { unlockHint.remove(); }, 500); } catch (err) { console.error("音频解锁失败:", err); unlockHint.innerHTML = &#39;❌ 请手动点击视频控制栏上的静音按钮&#39;; unlockHint.style.background = &#39;#ef4444&#39;; } }); // 4. 按钮控制事件 const toggleMuteBtn = document.getElementById(&#39;toggleMuteBtn&#39;); toggleMuteBtn.addEventListener(&#39;click&#39;, () => { video.muted = !video.muted; document.getElementById(&#39;muteStatus&#39;).textContent = video.muted ? &#39;是&#39; : &#39;否&#39;; // 更新按钮图标 const icon = video.muted ? &#39;🔇&#39; : &#39;🔊&#39;; toggleMuteBtn.querySelector(&#39;.icon&#39;).textContent = icon; }); const togglePlayBtn = document.getElementById(&#39;togglePlayBtn&#39;); togglePlayBtn.addEventListener(&#39;click&#39;, () => { if (video.paused) { video.play(); document.getElementById(&#39;playStatus&#39;).textContent = &#39;正在播放...&#39;; togglePlayBtn.querySelector(&#39;.icon&#39;).textContent = &#39;⏸️&#39;; } else { video.pause(); document.getElementById(&#39;playStatus&#39;).textContent = &#39;已暂停&#39;; togglePlayBtn.querySelector(&#39;.icon&#39;).textContent = &#39;▶️&#39;; } }); // 5. 自动显示播放状态 video.addEventListener(&#39;play&#39;, () => { document.getElementById(&#39;playStatus&#39;).textContent = &#39;正在播放...&#39;; }); video.addEventListener(&#39;pause&#39;, () => { document.getElementById(&#39;playStatus&#39;).textContent = &#39;已暂停&#39;; }); }); </script> </body> </html> ``` ## 解决方案特点 1. **初始静音自动播放**: - 设置`video.muted = true`满足自动播放策略要求[^1] - 添加`autoplay`属性和`playsinline`属性确保移动端体验 2. **用户交互解锁**: - 监听body的click事件,当用户点击页面时解除静音 - 提示用户点击页面以解锁声音 3. **跨浏览器支持**: - 处理Safari和Chrome的不同行为策略[^1] - 兼容移动端设备(避免全屏播放) 4. **状态反馈与辅助控制**: - 显示当前静音状态和播放状态 - 提供静音/解音切换按钮 - 提供暂停/播放控制按钮 5. **错误处理**: - 捕获播放异常并提供手动操作提示 - 逐步降级提供可替代控制方案
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值