video.js在iframe中如何解决无法自动播放问题

最新推荐文章于 2023-06-07 17:33:22 发布
最新推荐文章于 2023-06-07 17:33:22 发布
阅读量807 收藏
点赞数
文章标签： python js html javascript vue
www.liveqing.com 安防流媒体直播点播无插件服务
本文链接：https://blog.csdn.net/staritstarit/article/details/108657484
版权

问题

使用video.js播放视频，如果集成在iframe中，无法自动播放，如何解决呢？其实很简单，设置下 allow=“autoplay” ，如下所示：

<iframe src="test.html" width="640" height="360" style="border:0" allow="autoplay" allowfullscreen></iframe>

liveplayer

为了方便用户的集成，我们将videojs的功能通封装成播放器 liveplayer。liveplayer集flv.js,rtmp,hls,websocket与一身。

具体调用方式和使用方法见链接：https://www.npmjs.com/package/@liveqing/liveplayer

在这里插入图片描述

 

staritstarit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dropzone js video上传使用frame-grap.js生成缩略图
moamao_jishuyuan的博客
02-13 424
第一步：从github上下载frame-grap组件，下载的压缩里，只有下面两个文件是有用的 rsvp.js 和 frame-grab.js，目录： /frame-grab.js-master/client/ 下 下载地址为：https://github.com/rnicholus/frame-grab.js 第二步：引用文件 第三步：将以下代码加到Dropzone的 init 方法里 ...
video.js 基于js的video标签视频播放插件，简单上手
08-19
基于js的video标签视频播放插件； window.onload = function(){ oVdo = new Video({ name:"video", time:[ {"src":"./video/22.mp4","title":"shangjiahang@tinysoft"}, {"src":"./video/23.mp4","title":"shangjiahang1@tinysoft"}, {"src":"./video/24.mp4","title":"shangjiahang2@tinysoft"} ] }); }
html iframe视频自动播放的属性,html5自动播放与 <iframe> 你管videoautoplay=1不工作？_html5_开发99编程知识库...
weixin_36125755的博客
05-31 1150
试试这个这对我有用。private class AutoPlayVideoWebViewClient extends WebViewClient {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);//mimic onClick() event on the ...
iframe中video的一些设置
weixin_48785875的博客
03-26 1201
allowfullscreen = true /*允许iframe中video全屏功能*/ disablepictureinpicture="true" /*取消画中画等下载功能*/
glightbox:具有移动支持的纯Javascript灯箱。 它可以处理图像，具有自动播放功能的视频，内联内容和iframe
04-27
特征小-压缩后只有11KB 快速响应-适用于任何屏幕尺寸画廊支持-创建多个画廊视频支持-具有自动播放功能的Youtube，Vimeo和自托管视频内联内容支持-显示任何内联内容iframe支持-是否需要嵌入iframe？ 没问题键盘导航-...
前端面试宝典V4.0.pdf
01-17
弹性盒子 flex 布局是一种布局方式，可以使元素在容器中自动布局。flex 布局可以实现多种布局效果。 13. rem 布局 rem 布局是一种布局方式，使用 rem 单位来实现网页的自适应布局。rem 布局可以实现多种布局效果。...
iphone各种型号尺寸.docx
11-26
45. `<iframe>`：定义内联框架，用于在页面中嵌入另一个文档。 46. `<img>`：定义图像，通过`src`属性指定图像源。 47. `<input>`：定义用户输入字段，有许多不同的类型，如文本、密码、日期等。 48. `<ins>`：定义...
饿了么最新秋招笔试题前端试题.docx
12-08
在JavaScript中，有六种基本数据类型：Number、String、Boolean、Null、Undefined、Object。其中，Infinity、NaN、Undefined、Null是特殊的数据类型。比较操作符===会检查两个操作数的值和类型是否相同。如果 a===a...
html面试题.docx
10-06
在标准盒模型中，元素的总宽度和高度计算方式是内容区域加上内边距和边框；而在 IE 盒模型（quirks mode）中，宽度和高度仅包括内容，不包含内边距和边框。 5. 请说说你对标签语义化的理解？ HTML 标签语义化是指...
html音频禁止自动播放,HTML iframe允许音频文件的自动播放无法正常使用
weixin_35916239的博客
06-02 3073
该人默认没有自动播放功能根据Safari / WebKit Auto-Play policy，它使用户能够以较少的干扰来浏览网络，特别是通过自动播放声音的网站来减轻干扰。他们指示网站假定对视频或音频的任何使用都需要用户手势或单击才能播放。政策配置用户可以在每个网站的基础上启用自动播放功能。Safari >>首选项>>网站>>自动播放选项为：允许所有自动播放用声音...
video自动播放
TragueZw的博客
05-18 9421
最近在做大屏展示，需要在一开始播放引导视频，产生自动播放需求。 大部分浏览器都有对视频自动播放的限制，除非用户和浏览器发生交互，否则不允许自动播放，执行play方法，报错： Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 目前是没有完美的解决方案，只能根据业务场景来选择合适方案。 解决方案： 1. 静音播放 静音情况下自动播放是被允
页面自动播放策略autoplay失效-浏览器自动播放政策限制
weixin_44208883的博客
11-24 2030
Uncaught: （in promise）DOMExcepion: play() failed because the user didn't interact with the document first.音频自动播放失效
视频如何实现倍速播放（比如1.5倍、2倍播放）
iphone108的博客
12-04 2万+
原创文章 IPHONE108原创 20191204 方式1： 自己写代码调用自己的本地的mp4文件 使用playbackRate倍速播放来实现，实例如下： <video id="video" width="180" height="314" autobuffer controls src="./sing-song.mp4" type="video/mp4"></vi...
PC端和移动端都支持视频video自动播放的代码
wangmj518的专栏
12-03 1921
需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「汝瓷」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。其实这个功能并不复杂，只需要开通上传视频功能即可，看了下后台使用的编辑器是UEditor，目前没有视频上传图标，就通过调用js实现了编辑器里的视频上传图标UEditor默认的视频支持代码视频上传后自动视频的代码如下 <video class="edui-upload-video  vjs-default
浏览器的自动播放策略
最新发布
2301_77007887的博客
06-07 448
序言：在页面中使用的video标签引入一个视频，当设置为autoplay的时候，打开页面发现并没有自动播放。如果自动播放失败，则通过用户与页面交互后进行播放，如鼠标点击，划入之类的。4.顶部帧可以将自动播放权限委派给其iframe，以允许自动播放视频。由于浏览器限制的是声音的自动播放，在以静音状态进行播放时，是不受。，并在页面中提示用户，由用户来决定是否与页面进行交互并调用。）之后才知道播放视频时它受浏览器的自动播放策略的影响；3.在桌面设备上用户的媒体参与度指数阀值已经超过。方法时，传的参数中携带。
H5实现浏览器全屏API(全屏进入和全屏退出)
qq_35515563的博客
06-05 1万+
【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox 10+ element.mozRequestFullScreen(); document.mozCance
解决audio自动播放无效问题
热门推荐
皮小孩的博客
01-09 2万+
在360或者qq浏览器，audio的自动播放属性目前为止是有效的，网页的body里面插入下面代码后，打开页面就会自动播放音乐。 但是在edge\google等浏览器不支持音乐自动播放。
video.js 在加载完毕后自动静音播放
06-06
在上面的代码中，我们首先通过 videojs() 函数获取 video.js 的实例，然后使用 muted() 方法将 muted 属性设置为 true，以实现自动静音播放。接着，我们调用 play() 方法来播放视频。这样，视频就会在加载完毕后自动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值