如何仅使用HTML和javascript播放youtube视频中的音频 [英] How to play audio only from youtube videos using HTML and javascript

问题描述

我要做什么:创建一个项目列表，其中包含一个链接，用于播放每个项目旁边的youtube视频的音频

What I'm trying to do: Create a list of items which contains a link to play audio from a youtube video beside each item

我目前正在做什么:我可以使用以下方法对单个商品执行此操作:

What I'm currently doing: I'm able to do this for a single item using the below:

<div data-video="VIDEO_ID"  
     data-autoplay="0"         
     data-loop="1"             
     id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

这将创建一个播放按钮，并且可以完美地用于单个项目，但是由于它们都使用相同的ID，因此可能不适用于同一页面上的多个项目.创建其他ID会导致播放器无法正常运行.创建具有相同ID的两个不同的数据视频将仅允许第一个播放，而另一个将正确显示，但在按play时无法操作.

This creates a play button and works perfectly on a single item, however will not work with multiple items on the same page presumably since they all use the same ID. Creating a different ID causes the player to not function. Creating two different data-video's with the same ID will only allow the first one to play, the other will appear correctly but not operate when pressing play.

寻找解决方案:最好是如何将现有脚本用于同一页面上的多个视频.否则，使用自定义播放按钮仅在youtube视频上播放音频的替代解决方案将是不错的选择.

Looking for solution: Preferably how to use the existing script for multiple videos on the same page. Otherwise an alternative solution for playing audio only on youtube videos with a custom play button would be great.

谢谢！

推荐答案

如果需要，您可以像这样复制粘贴您的代码

If you want you can just copy paste your code like this

https://jsfiddle.net/8wkjqf3m/

，它可以正常工作，我不确定您是否在执行此操作时遇到问题，或者您的问题是否在其他地方.当然，它看起来很草率，应该重新编写代码，这样您就不必为每个视频都对每个函数进行硬编码了.

and it works, I'm not sure if you were having a problem doing that or if your problem was elsewhere. It is of course very sloppy looking and the code should be reworked so that you don't have to hard code every function for every video.

我尝试动态地进行所有操作，但均失败了.我不确定是否可以动态创建一个为您拥有的每个视频ID创建"new YT.player"的函数，以及是否可以动态创建onPlayerReady和onPlayerStateChange函数.我敢肯定有办法，但我想不通.

I tried to do everything dynamically and failed. I'm not sure if it is possible to dynamically make a function that makes a "new YT.player" for every video id you have and also have the onPlayerReady and onPlayerStateChange functions dynamically made to go with it. I'm sure there is some way but I couldn't figure it out.

但是，您的想法是为想要拥有的许多youtube播放器制作多个具有不同ID的"youtube-audio" div，并为iframe匹配多个"youtube-player" div.如果需要，可以使用javascript生成该部分，这样就不必用一堆重复的html污染代码.

The idea though is to make multiple "youtube-audio" divs with different ids for however many youtube players you want to have and have matching multiple "youtube-player" divs for the iframe to function. You can generate that part with javascript if you want so that you don't have to pollute your code with a bunch of repetitive html.

您也可以动态创建所有ID.

You can make all of your ids dynamically too.

var array = ['put a video id here','put a video id here','put a video id here'];
array = array.map(function(element,index) {
  var div = document.createElement('div');
  div.setAttribute('id', 'youtube-audio-' + index);
  return {'videoId': element, 'div': div };
}

您可以只拥有一个保存youtube视频ID的数组，然后使用初始化所有divs数据视频属性

You can just have an array holding the youtube video ids and then initialize all of the divs data-video attributes using

document.getElementById("youtube-audio-1").dataset.video = //youtube video id

我看不到动态执行所有操作的意义，尽管没有办法避免复制粘贴x数量的新YT.player"和"onPlayerReady"等...

I don't see the point in doing all of that dynamically though if there is no way to get around copy pasting x number of "new YT.player"s and "onPlayerReady"s etc...

祝你好运，让我知道我是否在正确的地方，或者那不是你想要的

Good Luck, let me know if I was in the right area or if that was not what you wanted

这篇关于如何仅使用HTML和javascript播放youtube视频中的音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！