如何使用js删除html中的video视频元素控件代码

最新推荐文章于 2023-09-11 10:26:50 发布

徊忆羽菲

最新推荐文章于 2023-09-11 10:26:50 发布

阅读量958

点赞数

文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/129147591

版权

文章提供了一段JavaScript代码示例，展示如何在用户点击PDF图标后，通过jQuery选择器找到具有特定class（shipin）的video元素并删除它们。函数`saveToPdfFile()`遍历这些元素，调用`removeVideo()`函数，该函数利用jQuery的`remove()`方法移除视频元素。

摘要由CSDN通过智能技术生成

如何使用js删除html中的video视频元素控件代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放mp4格式视频</title>

</head>
<body>

<div>

    <video class="videoya" data-video-duration="0" data-video_id="2" id="myVideo1" mediatype="video"
           src="https://www.qipa250.com/uploadedqrcode/douyinvideo/20221117/7132658349241404708.mp4"
           controls
           autoplay data-setup='{}' style='width: 10%;height: auto'></video>


    <video class="shipin" data-video-duration="0" data-video_id="2" id="myVideo2" mediatype="video"
           src="https://www.qipa250.com/uploadedqrcode/douyinvideo/20221117/7132658349241404708.mp4"
           controls
           autoplay data-setup='{}' style='width: 10%;height: auto'></video>


    <video class="shipin" data-video-duration="0" data-video_id="3" id="myVideo3" mediatype="video"
           src="https://www.qipa250.com/uploadedqrcode/douyinvideo/20221117/7132658349241404708.mp4" controls
           autoplay data-setup='{}' style='width: 10%;height: auto'></video>

    <a href="javascript:;" onclick="saveToPdfFile()" title="点我删除视频">
        <img style="width: 5%" src="img/pdf.png" alt="点我删除视频">
    </a>

</div>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>


<script>

    function saveToPdfFile() {
        $(".shipin").each(function () {
            removeVideo(this);
        });
    }

    //将视频元素删除掉
    function removeVideo(that) {

        let video_id = $(that).attr('data-video_id');
        let video_url = $(that).attr('src');

        console.log("checkVideo--video_id--", video_id);
        console.log("checkVideo--video_url--", video_url);

        $(that).remove();

    }

    // videoInit();


</script>

</body>