youtube-api - Youtube iframe api 自动播放不适用于 chrome 和视频分辨率设置不适用于所有浏览器
问题描述
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-vid', {
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.setPlaybackQuality('hd1080');
}
function onPlayerStateChange(e) {
if (e.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
请帮我设置 youtube 质量 hd1080 并在页面加载时自动播放我使用了上面的代码,但它对我不起作用
提前致谢!
解决方案
Chrome 的自动播放政策于 2018 年 4 月更改 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
谷歌浏览器不允许自动播放视频。如果要自动播放,则必须将视频静音。根据政策指南。
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
<div id="player"></div>
推荐阅读
- python - python中具有任意位的整数奇偶校验
- c# - .Net Core Web API 与 ServiceFabric MinRequestBodyDataRate
- node.js - 自定义错误处理程序在 Express 中不起作用
- python - 更新函数并从 scipy 获取迭代结果
- vb.net - 自定义类 vb.net 中未定义类型“记录”
- python - 具有对数比例颜色图的 Geopandas
- javascript - 从回调函数中提取处理响应的通用代码
- javascript - 正则表达式提取第二和第三个字符串
- c++ - 如何使用多核和多线程来获得最大的 cpu 和 I/O 容量来加速 C++ 中的程序?
- python - 匹配 2 个文本文件中的文本并从第一个文件获取信息并附加到另一个文件