zoukankan      html  css  js  c++  java
  • h5 video 播放视频, 动态更改视频源,播放内容不变问题解决

    播放视频时,快速切换视频源,在Chrome DevTools 总是报错:

    Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

    react 代码片段

    <div>
        <video controls width="100%" src={videoUrl}/>
    </div>

    检查发现切换播放内容,videoUrl更新了, 但是播放内容没变化

    原因: 调用play()的时候,视频文件还没有加载完成

    所以: 要先load,然后异步去调用play

    最终得到了这样一个版本:

    import { useEffect, useRef } from "react"
    const playRef = useRef()
    
    <div>
        <video controls width="100%" ref={playRef}/>
    </div>
    
    // react hooks
    
    useEffect(() => {
      if (playRef && playRef.current && videoUrl) {
        playRef.current.src = videoUrl 
        playRef.current.load() // 1. 先load
        const playPromise = playRef.current.play(); // 2.再play
        if (playPromise !== undefined) {
        playPromise
          .then(() => {
          	playRef.current.play()
          })
          .catch(() => {
          	playRef.current.pause()
          });
          }
        }
      }, [videoUrl])

    参考: https://segmentfault.com/a/1190000019066679

    另外: 本人用setTimeout 延时播放,并不能保证视频加载时长,控制台还是会提示错误, 因此采用了promise的回调函数处理

    Every day deserves to be expected
  • 相关阅读:
    python 进程、线程、协程感悟
    elk部署心得
    虚拟安装centos后无法上网、DNS无法解析问题解决
    mysql测试题
    爬取lol皮肤
    ping使用
    第一篇技术博客
    PADS layout修改字符时发生严重错误退出问题
    PADS 快捷键
    电容知识整理
  • 原文地址:https://www.cnblogs.com/aloehui/p/14864062.html
Copyright © 2011-2022 走看看