html - 视频背景无法在 iOS 设备上播放
问题描述
我有一个用作背景的视频:
<div class="embed-responsive embed-responsive-21by9 video_1">
<video id="video" autoplay="autoplay" playsinline loop name="media"><source src="../img/flowers.webm" type="video/webm"></video>
</div>
但我的问题是视频在 Android 和网络上正常播放,但在 iOS 设备上不能正常播放..我尝试添加playinline,静音但没有任何效果..
关于如何解决它的任何想法?
解决方案
Playr.io 它支持所有功能和后台播放
HTML
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
</video>
<div class="actions">
<button type="button" class="btn js-play">Play</button>
<button type="button" class="btn js-pause">Pause</button>
<button type="button" class="btn js-stop">Stop</button>
<button type="button" class="btn js-rewind">Rewind</button>
<button type="button" class="btn js-forward">Forward</button>
</div>
</div>
CSS
/* This is purely for the demo */
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
JS
document.addEventListener('DOMContentLoaded', () => {
// This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
const player = new Plyr('#player' , {
fullscreen: {
iosNative: true
}
});
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback, false);
}
// Play
on('.js-play', 'click', () => {
player.play();
});
// Pause
on('.js-pause', 'click', () => {
player.pause();
});
// Stop
on('.js-stop', 'click', () => {
player.stop();
});
// Rewind
on('.js-rewind', 'click', () => {
player.rewind();
});
// Forward
on('.js-forward', 'click', () => {
player.forward();
});
});
推荐阅读
- python - os.system() 与 os.popen() 使用 bash 进程替换时:ls: cannot access '/dev/fd/63': No such file or directory
- oracle - 所有表的 Oracle 动态查询
- apache-kafka - 当我启动卡夫卡连接时,卡夫卡经纪人正在获得无限量的日志
- mime-types - CSS 未加载,因为:拒绝应用样式,因为它的 MIME 类型
- javascript - 如何在不出现“TypeError:无法读取未定义的属性'_c'”错误的情况下将api组件(paystack)添加到vue
- javascript - htmx:加载 JS lib 并执行函数?
- php - 使用 PHP PDO_OCI 连接到多个版本的 Oracle DB
- python - 与硒一致的饼干
- postgresql - 使用 pg_restore 作为增量数据恢复 PostgreSQL 数据库,而不覆盖或删除现有表
- database - 数据库中的 SELECT 操作