1. 首页
  2. css

CSSYouTube和Vimeo视频的播放和暂停按钮(通过其API)

有时你只需要在页面上通过一些用户交互来播放一段视频,而不是右击该视频本身。也许一个\”播放视频\”按钮你自己的创作生活在你的网页上,你想开始时,该按钮是点击视频。那是我的地盘。如果这个视频是YouTube或Vimeo视频,我们就需要利用它们提供的api。没问题。
对于这些示例,我们假设您已经挑选了一个视频,您将把它放在YouTube的页面上。请确保iframe src URL的末尾有>,如下所示:

I also put an id attribute on the iframe so it will be easy and fast to target with JavaScript.2. Load the YouTube Player API
You could just link to it in a ,但是他们的所有文档都显示加载它是异步的,这对于第三方脚本总是很好的,所以让我们这样做:
// Inject YouTube API scriptvar = \”//www.youtube.com/player_api\”;var>3. Create a global function called onYouTubePlayerAPIReady
这是YouTube API准备好后将调用的回调函数。它需要被命名为这个。
function onYouTubePlayerAPIReady() {}
您的页面上的JavaScript可能有一些结构,因此通常我建议让这个函数调用组织系统中的另一个函数,并立即进入正确的轨道。但是对于本教程,让我们保持原样。4。创建播放器对象
这是能够控制该视频的对象。我们将使用HTML中iframe上的id属性来创建它。
var player;function onYouTubePlayerAPIReady() {// create the global player from the specific iframe>
Another callback!5. Create the \”player ready\” callback and bind events
We named this function when we created the player object. It will automatically be passed the event object, in which event.target is the player, but since we already have a global for it let\”s just use that.
Here we bind a simple click event to an element on the page with the id #play-button (whatever custom button you want) and call the player object\”s playVideo方法。
function onPlayerReady(event) {// bind eventsvar = document.getElementById(\”pause-button\”);pauseButton.addEventListener(\”click\”, function() {player.pauseVideo();});}现在所有这些都可以了!这里有一个演示:
我在这里使用了一个小SVG模板来制作按钮,只是为了好玩。对于Vimeo1。确保iframe src URL在iframe的

I also put an id属性的末尾有>,这样就可以方便快捷地使用JavaScript进行定位。2。加载\”froogaloop\”JS库
Vimeo player API实际上是通过将命令通过postMessage发送到iframe来工作的。您不需要使用froogaloop库来实现这一点,但是postMessage有一些固有的复杂性,这个库(由Vimeo自己)使之更容易实现。加上它只有1.8kb,所以我推荐它。
3. Create the player object
var == Froogaloopvar>
We target the iframe by the id我们添加了属性。然后我们使用特殊的froogaloop$f.4创建播放器。绑定事件
我们现在所要做的就是调用播放器对象上的方法来播放和暂停视频,所以让我们在单击播放和暂停按钮时调用它们。下面是一个演示:
您可以使用这两个服务的API做更多的工作。这会很有趣的,就跳进去吧!
– Vimeo API
– YouTube API

CSSYouTube和Vimeo视频的播放和暂停按钮(通过其API) 为WP2原创文章,链接:https://www.wp2.cn/css/cssyoutube%e5%92%8cvimeo%e8%a7%86%e9%a2%91%e7%9a%84%e6%92%ad%e6%94%be%e5%92%8c%e6%9a%82%e5%81%9c%e6%8c%89%e9%92%ae%ef%bc%88%e9%80%9a%e8%bf%87%e5%85%b6api%ef%bc%89/