gpt4 book ai didi

javascript - 仅在嵌入的 YouTube 视频上保留进度条和控件?

转载 作者:行者123 更新时间:2023-12-03 05:53:09 25 4
gpt4 key购买 nike

几个小时以来,我一直在寻找一种将 YouTube 视频作为音频播放器嵌入的方法,但我没有运气。我发现主要有3个选项:
1. 将 iframe 的高度设为 25px,但我真的很讨厌它的外观。
2. 使用播放和暂停按钮,但这样我没有进度条。
3. 我在某处读到,您只能隐藏视频,但使用 css 保留控件,但我无法做到这一点。

有人可以告诉我一种方法吗?

编辑:我有一个可能的解决方案,但我有一个问题。代码如下:

<html>
<head>
<style>
iframe{
height:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="playeroptions.js"></script>
</head>
<body>
<audio id="player2" preload="none" controls>
<source src="https://www.youtube.com/watch?v={{id}}" type="video/x-youtube">
</audio>
</body>
</html>

在我的 playeroption.js 文件中,我有这个:
$(document).ready(function(){
$('audio').mediaelementplayer();
});

在我的站点中,我无法按下音频播放器中的任何按钮。我怎样才能解决这个问题?
PS我收到以下错误:
Refused to execute script from 'http://127.0.0.1:8000/player/9XvXF1LrWgA/playeroptions.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

最佳答案

在评论中您说将 iframe 做得非常小后,视频仍然可见。这是因为视频将始终按比例缩小/放大到其播放器大小。
解决方法是让玩家非常高。 YT 播放器将保持视频的纵横比,因此我们最终会出现黑条以及底部和顶部。然后绝对它在父 div 中,隐藏它之外的东西,现在我们只有黑色背景的控件。

CSS:

.player {
width: 500px;
height: 35px;
overflow: hidden;
position: relative;
}

.player iframe {
position: absolute;
bottom: 0;
width: 100%;
height: 2000px;
border: none;
}

HTML:
<div class="player">
<iframe src="https://www.youtube.com/embed/F4jYWOqHPEA?autoplay=1"></iframe>
</div>

fiddle : https://jsfiddle.net/8h71453t

关于javascript - 仅在嵌入的 YouTube 视频上保留进度条和控件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61162535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com