iframe 外部引入视频 弹窗开始播放，关闭停止播放！

最新推荐文章于 2023-12-29 10:19:13 发布
最新推荐文章于 2023-12-29 10:19:13 发布
阅读量810 收藏 1
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freedom_____/article/details/129421259
版权

网上找了一堆，没解决掉！于是用了简单的方法！
开始获取 iframe src

var iframeSrc = $("iframe").attr("src");

关闭的时候src复制为空

$("iframe").attr("src", '');

弹窗再把获取的src赋值过去

 $("iframe").attr("src", iframeSrc);
废鸡程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe 播放视频
qq_42859450的博客
04-15 3804
<template> <div class="w100 h100"> <iframe :src="liveUrl" class="w100 h100" frameborder="no" border="0" marginwidth="0" marginheight="0" ></iframe> </div> </template> &l
触摸播放视频，并用iframe实现播放外站视频
最新发布
眾K的博客
05-14 293
【代码】触摸播放视频，并用iframe实现播放外站视频。
停止iframe里的视频音乐播放
水中熊的博客
03-06 4652
停止iframe里的视频音乐播放问题描述：在做微信h5开发的时候，iframe里面引入了视频网址，当播放视频时，将iframe隐藏后，视频音乐还在播放。问题解决：将iframe引入的视频网址刷新即可，即：var ifr = document.getElementsByTagName("iframe")[0], ifrLink = ifr.getAttribute("src"); ifr.se
关闭iframe中弹窗，视频也关闭播放
qq_42177117的博客
01-11 2678
实现思路： 1、写个iframe框架 2、JQ获取DIV里的路径值 3、弹出窗口，写一个iframe的html把值存进iframe的src 4、关闭窗口，把iframe的src清空或iframe框架直接关闭 <!--iframe视频--> <div class="video"> <div class="video-nr" id="video-nr"> </div> <div class="end" onClick="vide
jq替换iframe里面视频关闭自动播放的功能
12-11
通过jq把ifram里面的视频转换成不自动播放的视频。 希望有需要的同志们采纳一下。
html iframe 播放视频播放,播放iframe视频点击链接javascript
weixin_39603492的博客
06-15 2083
这样做,它将autoplay = 1附加到url,导致视频开始播放.附录：如果你的视频来源还没有查询字符串,那么添加一个？是谨慎的吗？而不是一个&,有时就是这种情况.这可以通过寻找它的存在来完成.Play video//use .one to ensure this only happens once$("#playvideo").one(function(){//as noted in ...
jQuery外部调用弹窗代码
04-07
这个文件可以直接引用layui库，因为弹窗外部已经引入了。 ```html <!DOCTYPE html> 弹窗内容 <!-- 如果需要在弹窗内使用layui组件，需要在这里引入layui --> <script src="layui/layui.all.js"></script> ...
通用的iframe弹层插件
01-07
【通用的iframe弹层插件】是一款专为网页设计者和开发者打造的高效工具，它致力于提供一个跨浏览器、兼容主流浏览器的iframe弹窗解决方案。这个插件的主要目的是在不刷新整个页面的情况下，通过iframe技术加载外部...
使用jQuery插件FancyBox轻松实现弹窗视频
10-09
// 在弹窗关闭后执行的回调函数 } }); }); ``` 通过以上步骤，你就可以使用jQuery插件FancyBox轻松实现弹窗视频的功能。结合压缩包中的"video"文件，你可以将这些代码应用到实际项目中，为用户提供一个优雅的...
vue中使用videojs，关闭窗口后视频流一直刷新问题，切换视频流问题
Qin的专栏
04-25 5415
项目开发时遇到问题 使用videojs关闭窗口后视频流一直刷新，使用pause暂停无效。 视频是在弹窗的时候展示，所以完整解决方案自己琢磨了一下，如下 <div v-html="videohtml"> </div> getVideoDialog() { this.videoVisible = true; this.videohtml = `<video id="videoPlayer" class="video-js" .
使用iframe播放视频，改变src，视频画面不改变
Conan_LU7的博客
10-31 618
【代码】使用iframe播放视频，改变src，视频画面不改变。
vue用iframe播放海康视频
weixin_42674490的博客
02-28 3069
由于项目需要同时显示两个相机的视频，使用上一篇文章封装的组件无法完成，因为当时webVideoCtrl.js是直接定义在全局的，$相当于一整个项目的window,无论怎么使用都只能在第一次定义的dom位置显示视频（如果有更好的方法欢迎评论区告知），因此使用了iframe隔离window。 1.在public地址下添加iframe.html 2.iframe.html <!doctype html> <html> <head> <title></
wangEditor使用iframe插入视频，直接在编辑器内查看视频，腾讯优酷为例
weixin_45575273的博客
06-10 3057
腾讯： 优酷： 找到视频的分享按钮，有复制通用代码，代码复制下来是这样的： 这是腾讯视频的 这个是优酷视频的：
unniapp通过iframe引入海康H5player实现视频监控的播放
记录
12-29 1144
我是把demo的文件直接放到staic文件直接用他的demo.html，也能用bin文件自己创建html文件引入h5player.min.js文件 根据自己的需求。3.在staic-h5player-demo.html。1.首先引入H5player。2.在需要用的页面直接。
三种视频播放标签（video，embed，iframe）-------笔记
limif的博客
09-15 3259
三种视频播放标签（video，embed，iframe）-------笔记
iframe嵌入本地视频或者http链接视频禁止自动播放
热门推荐
Aa12364567的博客
03-31 1万+
iframe嵌入本地视频或者http链接视频禁止自动播放
VUE：iframe访问并展示外部网址或者视频
干饭搬砖两不误。
03-26 6098
简介 在H5网址、APP等项目中，会有访问外部链接、播放网上视频的需求。 具体实现 上一个页面，传入三个 参数，分别是type（0 图文，1 视频，注意最好是用字符窜的格式）、url（图文或视频的网络外部链接地址）、logoUrl（logo图，用来展示视频封面用的）。 <template> <div> <iframe v-if="materialData....
html点击按钮出现弹窗播放视频
05-25
你可以使用以下代码实现点击按钮弹窗播放视频： ``` <button onclick="showVideo()">播放视频</button> <div id="videoModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeVideo()">×</span> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> <script> function showVideo() { document.getElementById("videoModal").style.display = "block"; } function closeVideo() { document.getElementById("videoModal").style.display = "none"; document.querySelector('#videoModal iframe').src = ''; } document.querySelector('#videoModal iframe').onload = function () { document.querySelector('#videoModal iframe').src += '?autoplay=1'; }; </script> ``` 在这个代码中，你需要将 `VIDEO_ID` 替换为你要播放的视频的 YouTube 视频 ID。当用户点击按钮时，会触发 `showVideo` 函数，这个函数会显示一个模态框，然后在模态框中嵌入一个 iframe，这个 iframe 会加载指定的 YouTube 视频。当用户关闭模态框时，会触发 `closeVideo` 函数，这个函数会将模态框隐藏，并且停止视频的播放。同时，当视频加载完成后，会自动播放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值