码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • JS如何正确销毁 VIDEO 和AUDIO 元素


    销毁 VIDEO 元素意味着停止视频的播放,并释放与其相关的所有资源。

    一般情况下,我们可以通过调用 VIDEO 元素的 pause() 方法来停止视频播放,然后使用 remove() 方法从 DOM 树中删除元素。

    但是,仅仅这样做可能并不能完全卸载 VIDEO 元素。如果视频正在播放或者已经加载了部分数据,那么该元素仍然会持有资源,因此可能会导致内存泄漏。为了彻底卸载 VIDEO 元素,我们需要将其赋值为 null,并且同时删除所有相关事件监听器和其他引用。

    对于音视频播放,我们需要确保正确卸载和销毁 VIDEO 元素,以提高性能并避免内存泄漏。在卸载 VIDEO 元素时,我们需要停止视频播放,清空 src 属性值,删除事件监听器,并将其赋值为 null。在销毁 VIDEO 元素时,我们需要执行卸载步骤之外,还需要将其从 DOM 树中删除,并将其赋值为 null。

    Audio 元素同理

    创建video

    1. const _video = document.createElement('video')
    2. _video.autoplay = true
    3. _video.loop = true
    4. _video.muted = true
    5. _video.src = 'xxxx'

    销毁video

    1. _video.pause()
    2. _video.removeAttribute('src')
    3. _video.load()
    4. _video = null

    这里我们除了调用 pause() 方法之外,还执行了以下操作:

    调用 removeAttribute('src') 方法,以清空 VIDEO 元素的 src 属性值,停止加载视频。
    调用 load() 方法,以确保所有相关数据都被卸载。
    将 VIDEO 元素的事件监听器设为 null(如果有的话),以避免内存泄漏。
    最后将 VIDEO 元素赋值为 null,以释放其占用的内存。

  • 相关阅读:
    Android OpenGL ES踩坑记录
    Java面向对象之——多态
    用户画像的基本架构
    企业微信,实现群机器人监控线上服务报警
    Leaflet结合Echarts实现迁徙图
    HTLM技术、CSS技术、JavaScript基础
    [CSS动效][按钮篇] 适用于 FlatUI 的扁平化按钮
    C++学习之:布隆过滤器与哈希切分
    计网学习笔记五 wireless && mobile networks
    考研数学笔记:一个例子让你明白什么是自由未知数什么是非自由未知数
  • 原文地址:https://blog.csdn.net/qq_31851435/article/details/132801525
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号