开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Safari阻止video.js播放器自动播放

基础概念

自动播放策略：现代浏览器为了提升用户体验和减少流量消耗，实施了一系列自动播放策略。这些策略通常会限制视频和音频在没有用户交互的情况下自动播放。

Safari的自动播放策略：Safari浏览器特别严格，它默认禁止所有媒体内容的自动播放，除非用户与页面进行了交互，并且媒体内容是静音的。

相关优势

用户体验：防止用户在不知情的情况下消耗流量或被突然的音频打扰。
性能优化：减少不必要的资源加载，提升页面加载速度。

类型与应用场景

类型：浏览器自动播放策略主要分为基于用户交互的和基于媒体属性（如静音）的两类。
应用场景：适用于所有需要自动播放视频或音频的网页和应用，特别是在移动设备和公共网络环境下。

问题原因及解决方法

原因：Safari浏览器阻止video.js播放器自动播放主要是因为其严格的自动播放策略。

解决方法：

静音自动播放：设置视频元素的muted属性，这样Safari允许静音的视频自动播放。
静音自动播放：设置视频元素的muted属性，这样Safari允许静音的视频自动播放。
用户交互后播放：通过监听用户的点击或其他交互事件，然后在事件处理函数中调用播放方法。
用户交互后播放：通过监听用户的点击或其他交互事件，然后在事件处理函数中调用播放方法。
使用Promise处理播放请求：利用Promise来处理播放请求，这样可以更好地管理播放失败的情况。
使用Promise处理播放请求：利用Promise来处理播放请求，这样可以更好地管理播放失败的情况。

示例代码

以下是一个完整的示例，展示了如何在Safari中实现video.js播放器的自动播放：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video.js Auto Play</title>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{}' muted>
    <source src="my-video.mp4" type="video/mp4">
  </video>

  <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
  <script>
    var player = videojs('my-video');
    player.ready(function() {
      this.play().then(() => {
        console.log('Video is playing');
      }).catch(error => {
        console.error('Video play failed:', error);
      });
    });
  </script>
</body>
</html>

通过上述方法，可以有效解决Safari浏览器阻止video.js播放器自动播放的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue3开发：视频播放器video.js使用详解

前言 Video.js是一个通用的在网页上嵌入视频播放器的JS库，比原生video标签有更强大的功能、更好的兼容性、更美观等优点。...是一个比较流行的视频播放器，它的官网是https://videojs.com/ 本篇文章就来看看在vue3项目中如何使用video.js。...安装使用首先安装video.js： pnpm install video.js --save 然后引入css，在mian.js中： import "video.js/dist/video-js.css...最后初始化播放器： import videojs from "video.js"; const player = videojs(playerId, {autoplay: true}); player.src...“any”：自动播放，如果浏览器阻止的话会先静音再自动播放。这里大家先了解一下，后面我会详细说一下自动播放的问题。

10.7K4 0

手把手从零开始---封装一个vue视频播放器组件

还是先去网上找找轮子吧经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化（二次封装）。...-S 在组件中简单使用插件 template 抱歉，您的浏览器不支持 script import videojs from “video.js”; //播放器中文，不能使用.js文件 import videozhCN...mounted(){undefined let options = {undefined autoplay: true, //自动播放 language: “zh-CN”, controls: this.controls...这里小编也给大家整理了一些video.js常用的配置项：常用选项 autoplay：true/false 播放器准备好之后，是否自动播放【默认false】 controls：true/false 是否拥有控制条...autoSetup 类型： boolean 阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。

3.9K1 0

如何使用video.js自动播放TSINGSEE青犀视频流媒体平台EasyNVR的视频？

Web网页播放视频的播放器有很多，TSINGSEE青犀视频开发的EasyPlayer也是比较完善且稳定的一套播放器，目前已经集成到了我们EasyNVR、EasyGBS、EasyDSS等多个视频流媒体平台当中...也有用户咨询开源的播放器video.js来进行播放。...这里我们通过video.js来做示例，video.js本身自带自动播放属性；我们的平台都有自己的接口来进行视频的获取，以EasyNVR为例，接口为：/api/v1/getchannelstream image.png...将获取到的视频流直接加入到播放器里面去，如果需要自动播放功能，可以直接添加自动播放的属性进去；通过添加autoplay()，来完成视频播放的自动加载，如下： player = videojs...("video", { autoplay: true, }); 但是这样做可能出现一个问题，即在制作四分屏时可能在一些浏览器上并不能自动播放，video.js加载完成后视频播放呈现出暂停样式

5.2K3 0

如何使用video.js自动播放TSINGSEE青犀视频流媒体平台EasyNVR的视频？

也有用户咨询开源的播放器video.js来进行播放。...当然除了EasyPlayer之外，也可以用其他播放器播放TSINGSEE青犀视频流媒体平台的视频流，本篇博文讲说明一下如何使用EasyPlayer以外的播放器来处理视频流。...这里我们通过video.js来做示例，video.js本身自带自动播放属性；我们的平台都有自己的接口来进行视频的获取，以EasyNVR为例，接口为：/api/v1/getchannelstream 将获取到的视频流直接加入到播放器里面去...，如果需要自动播放功能，可以直接添加自动播放的属性进去；通过添加autoplay()，来完成视频播放的自动加载，如下： player = videojs("video", { autoplay: true..., }); 但是这样做可能出现一个问题，即在制作四分屏时可能在一些浏览器上并不能自动播放，video.js加载完成后视频播放呈现出暂停样式，在其他浏览器上可以自动加载播放。

5.2K3 0

videojs播放器插件使用详解

1、videojs简介 Video.js是一款web视频播放器，支持html5和flash两种播放方式。...，是否自动播放【默认false】 controls : true/false 是否拥有控制条【默认true】,如果设为false ,那么只能通过api进行控制了。...autoplay 类型： boolean 如果true/作为属性存在，则在播放器准备就绪时开始播放。注意：从iOS 10开始，Apple autoplay在Safari中提供支持。...autoSetup 类型： boolean 阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。...此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。否则，vtt.js与Video.js捆绑在一起。组件选项 Video.js播放器是一个组件。

53.2K11 7

集RTMP, HLS, FLV, WebSocket 于一身的网页直播点播播放器EasyPlayer.js引用videojs无法自动播放问题解决

EasyPlayer几乎涵盖了开发者所需的全部平台，尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题，比如：不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等...EasyPlayer.js，极大地方便了开发者在解决B/S型业务开发，集 rtmp，hls，flv，websocket 于一身的网页直播/点播播放器。...引用videojs无法自动播放问题很多的流媒体视频H5网页播放使用的是videojs来进行的播放，而videojs本身自带的自动播放属性是需要通过添加autoplay()方法来完成视频播放的自动加载：...我们根据videojs最新的问题修复版本，设置一下更新后的swf版本： videojs.options.flash.swf = 'video-js-fixed.swf'; 设置flash swf路径后，Video.js...实际上，采用video.js播放或者采用ckplayer、cyberplayer等播放器，在安防、流媒体、音视频领域，总会有一些局限，举个简单的例子，我们为了产品全平台、全终端的兼容，需要H5播放能同时支持

6.9K1 0

videojs插件使用「建议收藏」

src="https://video.pearvideo.com/head/20190925/cont-1606116-14423410.mp4" type="video/mp4"> 自动播放...，加一个 autoplay 就可以了，在微信移动端，是不允许视频自动播放 js var options = { autoplay: false,// 自动播放：true/false controls..._1']").videoJs({ /** * 自动播放：true/false * 参数类型：Boolean **/ autoplay: false, /** * 是否显示底部控制栏：true/false...: 300, /** * 视频播放器显示的高度 * 参数类型：String|Number * 例如：200 or "200px" **/ height: 300, /** * 将播放器置于流体模式下，计算播放器动态大小时使用该值...* 此选项将在“novtt”建立video.js（即video。novtt js）。否则，vtt.js捆绑video.js。

10.4K2 1

绕过safari阻止window.open打开窗口

safari基于安全策略，会默认阻止使用window.open打开新窗口。

1.3K4 0

EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的网页H5自动播放方案

直播的应用场景中，在打开一路直播流后，极少看到需要点击播放按钮才能直播播放视频流的情况，但是由于H5场景的播放需要兼容的浏览器非常多，这样的情况下经常会遇到各种各样的摄像机网页播放的问题，比如这里解析的视频流自动播放的问题...：很多安防、摄像机、互联网流媒体播放多采用的是Video.js来进行播放，Video.js本身自带自动播放属性，通过添加autoplay(),来完成视频播放的自动加载； player = videojs...("video", { autoplay: true, }); 在制作四分屏的时出现给videojs添加autoplay()后，在一些浏览器上并不能完成自动播放,videojs...解决： videojs.options.flash.swf = 'video-js-fixed.swf'; 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件；...EasyPlayer.js 我们将很多常用的情况下需要的H5、浏览器、微信、Chrome、Flash播放功能，都整合到了一个非常高效、稳定、完善的EasyPlayer.js播放器中，兼容了HTTP、HLS

5K2 0

如何利用免版税视频流技术构建优质视频体验？

测试的工作原理是为每个源加载一个简单的元素并输入被设置为静态托管状态的短视频片段，同时正确配置所有必需的CORS设置；启动静音与自动播放以及playinline从而简化测试，以便我们可以在页面加载时轻松验证播放效果...以下选项可供您参考： Video.js Video.js是一个全面的HTML5视频播放器框架，内置插件、样式和对HLS和DASH的全面支持。...构建开源的视频交付链，Video.js是一个很好的选择。Video.js已经实现了对开源编解码器与容器的良好支持；如果结合DASH，Video.js甚至可以与具有ABR功能的编解码器一起使用。...开源视频链的另一优势在于其已经为Video.js提供了一个OGV.js插件。这意味着我们可以借助一套统一的视频播放器，使那些原本不支持开源编解码器的浏览器支持OGV.js下的polyfill。...支持Opus的AV1 WebM 容器基于ABR的SASH 支持具有ABR功能的OGV.js polyfill 技术的Video.js 总结这是一个在线视频蓬勃发展的时代，越来越多的设备与浏览器提供了对开源播放器的支持

3.3K3 0

如何开发一款 H5 小程序直播？

可以使用Safari浏览器访问 http://127.0.0.1:7002/live/movie.m3u8 H5端播放器这里才是前端真正需要关心的部分，主要介绍我们如何用js去写一个直播的播放器，...video.js：https://github.com/videojs/video.js 是国外比较流行的视频框架，他的特长是做了非常好的自定义ui，符合线上成品的场景，除了自定义ui，还提供了很多插件...video.js可以支持hls也是因为插件是基于hls.js flv.js是B站开源的flv格式的播放器，如果是http-flv协议的直播用它是非常合适的。...muted: 静音(移动端非静音的视频是不允许自动播放的，想要自动播放一定要静音) loop: 循环播放 preload: 预加载，每个浏览器表现不一致，尤其是移动端，如果需要最好加上。...http的地址我们可以使用Safari浏览器访问。也可以使用我们上面自己开发的播放器访问。

3.6K2 0

前端中的直播

import React from 'react'; import videojs from 'video.js' // import videozhCN from 'video.js/dist/lang.../zh-CN.json'; //播放器中文，不能使用.js文件 import 'video.js/dist/video-js.css'; //样式文件注意要加上 import 'videojs-flash...const videoJsOptions = { autoplay: true, //自动播放 language: 'zh-CN', // controls...这样处理完成后就可以自动播放了。真是操蛋了。...'video.js/dist/lang/zh-CN.json'; //播放器中文，不能使用.js文件 import 'video.js/dist/video-js.css'; //样式文件注意要加上

4.8K2 1

前端中的直播

import React from 'react'; import videojs from 'video.js' // import videozhCN from 'video.js/dist/lang.../zh-CN.json'; //播放器中文，不能使用.js文件 import 'video.js/dist/video-js.css'; //样式文件注意要加上 import 'videojs-flash...const videoJsOptions = { autoplay: true, //自动播放 language: 'zh-CN', // controls...这样处理完成后就可以自动播放了。真是操蛋了。...'video.js/dist/lang/zh-CN.json'; //播放器中文，不能使用.js文件 import 'video.js/dist/video-js.css'; //样式文件注意要加上

5.6K2 0

Safari浏览器html5网页自动播放bgm

Safari 中通过 playsinline + muted 实现媒体自动播放其实从 ios10 开始 safari 重新支持了自动播放，不过有前置条件，需要在 video 或 audio 添加 muted...属性并且设置为 true（或者视频本身没有音轨），这样设置了 muted （静音）的媒体标签就符合自动播放的规则了，不过单单设置了 muted 并不能自动播放，还有另外一个关键属性，那就是 playsinline...即可不全屏播放媒体，nice~给 video 设置了以上属性后，那么就已经实现了视频的自动播放了...可以在 window.onload() 等事件中取消 video 标签静音状态即可，即完美实现媒体自动播放。

1.8K4 0

官网改版项目问题总结

1、Safari浏览器不能自动播放视频这次官网首页是有一个内嵌视频，正常情况下给video标签加上autoplay属性就能加载完自动播放了，但是实际发现Safari不会，查询了解到新版Safari禁用了自动播放...发现多个浏览器对video标签做了自动置顶，也就是跳出正常布局，显示在页面最顶层，而且就算不置顶，当点击播放以后也会跳出布局，后来我在网上查了很多资料，也想了很多办法，由于我用的原生的video标签，所以考虑使用video.js

1.1K2 0

一款web端的好用又好看的音乐、视频播放器-XGPlayer

前言视频播放器一直是Web端比较难整的功能，虽然已经有比较优秀的开源库。可以满足日常开发大部分的功能，但是在一些功能上还是不尽如人意。今天给大家介绍一款由西瓜团队开源的视频播放器。...官方的介绍如下：字节跳动的视频业务大多数是短视频，早期的时候我们在 video.js 基础上做二次开发。后来发现很多功能达不到我们的要求，比如自定义UI的成本、视频的清晰度无缝切换、视频流量的节省。...直到最近，我们想完善文档并把播放器源代码开源出来给更多的视频从业者一个参考，我们一起交流学习，共同进步。...，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置参考运行效果丰富的配置选择器视频源尺寸流式布局自适应视频内容宽高音量调节封面图倍速调节预览、全屏弹幕画中画截图 …...音乐播放器竟然还支持音乐播放…… 总结官网还有很多实用的在线工具和示例Demo。大家可以去官网查看，总之一定会有你想不到的配置和功能。

3K1 0

H265流媒体播放器EasyPlayer如何设置视频关闭播放？

使用了TSINGSEE青犀视频平台的小伙伴都知道，EasyNVR、EasyDSS内都集成了EasyPlayer的不同版本，如果有用户想将EasyPlayer播放器集成进自己的流媒体平台，我们也提供了非常简单易用的...image.png Easyplayer播放器组件现在已经是免费使用了，很多用户都在使用Easyplayer播放器插件，由于我们播放器是默认自动播放，如果有用户想设置播放器关闭自动播放，我们可以在播放器内部实现...在Easyplayer播放器中，只需要更改播放器js的一个设置，即muted这个参数，需要将这个muted参数给去除。 image.png 这样就不会自动播放了，加载出来就会有一个播放按钮。...image.png muted实际上是一个去除音频的参数，将这个参数去除后，浏览器阻止了音频，就会取消视频的自动播放。

1.4K1 0

EasyPlayer.js播放器首次加载报错Uncaught (in promise) DOMException

测试过EasyPlayer播放器的朋友都知道，EasyPlayer在做播放器项目集成的时候十分便捷，因为EasyPlayer不仅针对不同的协议衍生出了多个版本，EasyPlayer.js、EasyPlayerPro...这个错误与谷歌浏览器机制有关，谷歌阻止播放器的自动播放，如果页面首次加载中视频带声音并且设置了自动播放，谷歌则会阻止播放器播放并抛出一个错误异常。...如果出现错误在播放器中加入点击播放按钮在播放器标签上加入muted禁止音频，则可以避免这个报错的出现。...的定制成本比较高，灵活程度没有EasyPlayer-RTSP和EasyPlayer-RTMP专用播放器的灵活程度高，EasyPlayerPro考虑的是通用性，而专用播放器考虑的是定制性。...因此如果还想了解TSINGSEE青犀视频开发的其他专用播放器，欢迎联系我们，目前EasyPlayer系列已经支持H265编码的视频播放，同时支持集成，欢迎了解。

4.4K1 0

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能（虽然很多小白用户都不知道这个），用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的，展示形式跟原生的应用是一样并最大限度地模拟本地...不过，现在发现了个问题，就是通过主屏幕上点击进入Web APP 形式的网页时候，点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心，如果这样的话还是Web APP...在国外问答网站 stackoverflow 发现有不少这个问题，如iPhone Safari Web App opens links in new window、Keep web app in standalone... iOS 7.0.4（iPhone 与 iPad）测试通过，代码应该兼容性不错，在这里分享： //iOS Web APP中点击链接跳转到Safari

1.3K3 0

阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

其中一个就是这个iOS Web APP中点击链接跳转到Safari 浏览器新标签页（窗口）的问题。...问题说明 iOS 上的Safari 浏览器中有一个“发送到屏幕”的功能（虽然很多小白用户都不知道这个），用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的，展示形式跟原生的应用是一样并最大限度地模拟本地...不过，现在发现了个问题，就是通过主屏幕上点击进入Web APP 形式的网页时候，点击任何一个链接就会跳转到Safari 浏览器并新建一标签页打开所属链接——这个功能真心恶心，如果这样的话还是Web APP...在国外问答网站 stackoverflow 发现有不少这个问题，如iPhone Safari Web App opens links in new window、Keep web app in standalone... iOS 7.0.4（iPhone 与 iPad）测试通过，代码应该兼容性不错，在这里分享： //iOS Web APP中点击链接跳转到Safari

9.1K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭