react & youtube

https://www.npmjs.com/package/react-youtube

https://developers.google.com/youtube/iframe_api_reference

通过 IFrame Player API，您可以在自己的网站上嵌入 YouTube 视频播放器并使用 JavaScript 控制播放器。

与 Flash 和 JavaScript Player API 不同的是，这两者都要求在您的网页上嵌入一个 Flash 对象，而 IFrame API 会将内容发布到网页上的<iframe>标记中。

这种方法比之前提供的 API 更加灵活，因为它允许 YouTube 针对不支持 Flash 的移动设备提供 HTML5 播放器（而非 Flash 播放器）。

demo



<!DOCTYPE html>

<html>

  <body>

    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

    <div id="player"></div>

    <script>

      // 2. 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);

      // 3. This function creates an <iframe> (and YouTube player)

      //    after the API code downloads.

      var player;

      function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {

          height: '360',

          width: '640',

          videoId: 'M7lc1UVf-VE',

          events: {

            'onReady': onPlayerReady,

            'onStateChange': onPlayerStateChange

          }

        });

      }

      // 4. The API will call this function when the video player is ready.

      function onPlayerReady(event) {

        event.target.playVideo();

      }

      // 5. The API calls this function when the player's state changes.

      //    The function indicates that when playing a video (state=1),

      //    the player should play for six seconds and then stop.

      var done = false;

      function onPlayerStateChange(event) {

        if (event.data == YT.PlayerState.PLAYING && !done) {

          setTimeout(stopVideo, 6000);

          done = true;

        }

      }

      function stopVideo() {

        player.stopVideo();

      }

    </script>

  </body>

</html>

react & youtube的更多相关文章

  1. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. RxJS + Redux + React = Amazing!（译二）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  3. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  4. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

  5. 【转】React.js 概览

    原文转自:http://segmentfault.com/blog/jiyinyiyong/1190000000693651 这里关于 React 的收集的消息的一个提纲, 具体内容看下边的链接,微博 ...

  6. React vs Angular 2: 冰与火之歌

    黄玄 · 3 个月前 本文译自 Angular 2 versus React: There Will Be Blood ,其实之前有人翻译过,但是翻得水平有一点不忍直视,我们不希望浪费这篇好文章. 本 ...

  7. 移动应用跨平台框架江湖将现终结者？速来参拜来自Facebook的React Native

    React Native使用初探 February 06 2015 Facebook让所有React Conf的参与人员都可以初尝React Native的源码---一个编写原生移动应用的方法.该方法 ...

  8. 【翻译】React vs Angular: JavaScript的双向性

    翻译原文链接:https://blog.prototypr.io/react-vs-angular-two-sides-of-javascript-b850de22b413 我的翻译小站:http:/ ...

  9. react源码总览(翻译)

    用react也有段时间了, 是时候看看人家源码了. 看源码之前看到官方文档 有这么篇文章介绍其代码结构了, 为了看源码能顺利些, 遂决定将其翻译来看看, 小弟英语也是半瓢水, 好多单词得查词典, 不当 ...

随机推荐

  1. 有时间了解一下Spark SQL parser的解析器架构

    1:了解大体架构 2:了解流程以及各个类的职责 3:尝试编写一个

  2. P1897 电梯里的爱情

    简单模拟: 没什么好说的,因为范围比较水,所以直接按题意直接模拟1就好 #include<iostream> using namespace std; #define ll long lo ...

  3. geth工作运行程序转后台

    今天查看了一下运行程序怎么转后台,然后就发现了之前写的脚本一定要进行console控制台然后在解锁coinbase,然后才手动挖矿的操作真的是太笨了,后面研究了一下,发现是可以在运行语句上进行操作的: ...

  4. APP耗电量测试

    现象 APP耗电,导致电池续航能力不佳,如下图,在小米MIX2和iPhone X机型上后台静默一小时各应用的耗电排行: 基本概念 相对于PC来说,移动设备的电池电量是非常有限的,保持持久的续航能力尤为 ...

  5. Kano模型告诉你“是不是只要企业努力的提高产品或服务质量，顾客满意度就一定会提高吗？”

    在 PO在敏捷需求下要遵守哪6条重要原则?   中讲到探索和交付两大阶段的6个原则 其中在原则[做有价值的需求]中讲了两个方法:BSA分析和产品Backlog 其中BSA分析是我在产品规划阶段常使用的 ...

  6. 解决IsEditable="True"的ComboBox在DataGrid中点击一次不能选中行的问题

    原文:解决IsEditable="True"的ComboBox在DataGrid中点击一次不能选中行的问题 此方法很笨拙,并不推荐使用!!! 此方法很笨拙,并不推荐使用!!! 此方 ...

  7. Spring Boot2.0 整合 Kafka

    Kafka 概述 Apache Kafka 是一个分布式流处理平台,用于构建实时的数据管道和流式的应用.它可以让你发布和订阅流式的记录,可以储存流式的记录,并且有较好的容错性,可以在流式记录产生时就进 ...

  8. Winform开发框架之字段权限控制

    在我的很多Winform开发项目中(包括混合框架的项目),统一采用了权限管理模块来进行各种权限的控制,包括常规的功能权限(按钮.菜单权限).数据权限(记录的权限),另外还可以进行字段级别的字段权限控制 ...

  9. ASP.Net Core2.1中的HttpClientFactory系列二：集成Polly处理瞬态故障

    前言:最近,同事在工作中遇到了使用HttpClient,有些请求超时的问题,辅导员让我下去调研一下,HttpClinet的使用方式已经改成了之前博客中提到的方式,问题的原因我已经找到了,就是因为使用了 ...

  10. 十九、多文件上传（ajaxFileupload实现多文件上传功能）

    来源于https://www.jb51.net/article/128647.htm 打开google 搜索"ajaxFileupload' ‘多文件上传"可以搜到许许多多类似的, ...