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


  2. <!DOCTYPE html>
  3. <html>
  4.   <body>
  5.     <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
  6.     <div id="player"></div>
  8.     <script>
  9.       // 2. This code loads the IFrame Player API code asynchronously.
  10.       var tag = document.createElement('script');
  12.       tag.src = "https://www.youtube.com/iframe_api";
  13.       var firstScriptTag = document.getElementsByTagName('script')[0];
  14.       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  16.       // 3. This function creates an <iframe> (and YouTube player)
  17.       //    after the API code downloads.
  18.       var player;
  19.       function onYouTubeIframeAPIReady() {
  20.         player = new YT.Player('player', {
  21.           height: '360',
  22.           width: '640',
  23.           videoId: 'M7lc1UVf-VE',
  24.           events: {
  25.             'onReady': onPlayerReady,
  26.             'onStateChange': onPlayerStateChange
  27.           }
  28.         });
  29.       }
  31.       // 4. The API will call this function when the video player is ready.
  32.       function onPlayerReady(event) {
  33.         event.target.playVideo();
  34.       }
  36.       // 5. The API calls this function when the player's state changes.
  37.       //    The function indicates that when playing a video (state=1),
  38.       //    the player should play for six seconds and then stop.
  39.       var done = false;
  40.       function onPlayerStateChange(event) {
  41.         if (event.data == YT.PlayerState.PLAYING && !done) {
  42.           setTimeout(stopVideo, 6000);
  43.           done = true;
  44.         }
  45.       }
  46.       function stopVideo() {
  47.         player.stopVideo();
  48.       }
  49.     </script>
  50.   </body>
  51. </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. [TJOI2017]城市

    嘟嘟嘟 这题刚开始想复杂了,想什么dp去了,其实没那么难. 考虑断掉一条边,记分离出来的两棵子树为A和B,那么合并后的树的直径可能有三种情况: 1.A的直径. 2.B的直径 3.A的半径+边权+B的半 ...

  2. Linux：Day8(上) 文件系统挂载和管理工具

    文件系统管理: 将额外文件系统与根文件系统某现存的目录建立起关联关系,进而使得此目录做为其它文件访问入口的行为称之为挂载: 解除此关联关系的过程称之为卸载: 把设备关联挂载点:Mount Point ...

  3. 008_python内置语法

    一. 参考:http://www.runoob.com/python/python-built-in-functions.html (1)vars() 描述 vars() 函数返回对象object的属 ...

  4. javaScript的原型模式

    一.原型模式: 这个只存在于函数中. 我们在创建的每一个函数中都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以有特定类型 的所有实例共享的属性和方法 ...

  5. HyperLedger Fabric 1.0的Transaction处理流程

    如果把区块链比作一个只能读写,不能删改的分布式数据库的话,那么事务和查询就是对这个数据库进行的最重要的操作.以比特币来说,我们通过钱包或者Blockchain.info进行区块链的查询操作,而转账行为 ...

  6. npm太慢， 淘宝npm镜像使用方法

    淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...

  7. MySQL报错: java.sql.SQLException: Column count doesn't match value count at row 1

    这个是今天写新项目的是后,写插入语句测试用例的时候报这个错误, 其实错误的原因就是插入语句的前面的列和后面的值 的个数不对. 错在此,仔细检查一下,看看少了哪一个,然后修改就可以了.

  8. java 基础 动态绑定和多态

  9. [翻译] ASP.NET Core 利用 Docker、ElasticSearch、Kibana 来记录日志

    原文: Logging with ElasticSearch, Kibana, ASP.NET Core and Docker 一步一步指导您使用 ElasticSearch, Kibana, ASP ...

  10. Item 25: 对右值引用使用std::move，对universal引用则使用std::forward

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 右值引用只能绑定那些有资格被move的对象上去.如 ...