{"id":3910,"date":"2023-03-15T22:48:01","date_gmt":"2023-03-15T14:48:01","guid":{"rendered":"https:\/\/resource.webduino.io\/?p=3910"},"modified":"2023-03-30T17:10:47","modified_gmt":"2023-03-30T09:10:47","slug":"youtube","status":"publish","type":"docs","link":"https:\/\/resource.webduino.io\/docs\/socket\/useful\/youtube","title":{"rendered":"Youtube \u4e92\u52d5"},"content":{"rendered":"

\u63a5\u8457\u4f86\u770b Google \u7684 Youtube\uff0c\u4e00\u822c\u5c0d Youtube \u7684\u8a8d\u77e5\u4e0d\u5916\u4e4e\u662f\u64ad\u64ad\u5f71\u7247\uff0c\u80fd\u5920\u62ff\u4f86\u73a9\u667a\u6167\u63d2\u5ea7\u55ce\uff1f\u9019\u5c31\u9700\u8981\u9760\u4e00\u4e9b\u5275\u610f\u548c\u60f3\u50cf\u4e86\uff0c\u900f\u904e\u548c Youtube \u5f71\u7247\u7684\u4e92\u52d5\uff0c\u5c31\u53ef\u4ee5\u8b93\u5f71\u7247\u7684\u89d2\u8272\u64cd\u63a7\u771f\u5be6\u7684\u96fb\u71c8\u3002<\/p>\n

\u76f8\u95dc Webduino \u6559\u5b78\u53c3\u8003\uff1aRFID ( \u63a7\u5236 Youtube )<\/a>\u3001\u53ef\u8b8a\u96fb\u963b ( \u6539\u8b8a Youtube \u97f3\u91cf )<\/a>\u3001\u8d85\u97f3\u6ce2 ( \u63a7\u5236 Youtube )<\/a><\/p><\/blockquote>\n

Youtube \u8d77\u624b\u5f0f<\/h2>\n

\u8981\u4f7f\u7528 Youtube \u73a9\u958b\u95dc\u71c8\u7684\u8a71\uff0c\u9996\u5148\u8981\u4e86\u89e3\u76f8\u95dc\u7684\u63a7\u5236\u65b9\u5f0f\uff0c\u9019\u6642\u5019\u4e00\u5b9a\u8981\u4f86\u5b98\u65b9\u7db2\u7ad9 \u770b\u770b\uff0c\u56e0\u70ba\u6211\u5011\u8981\u5728\u7db2\u9801\u88e1\u9762\u4f7f\u7528\uff0c\u5c31\u9ede\u9078 IFrame Player API \u95b1\u8b80\u3002<\/p>\n

\u53c3\u8003\uff1aYoutube \u958b\u767c\u4eba\u54e1\u5c08\u5340<\/a>\u3001IFrame Player API<\/a><\/p><\/blockquote>\n

\"IFrame<\/p>\n

\u6309\u7167\u5b98\u65b9\u7684\u6559\u5b78\uff0c\u9996\u5148 HTML \u9700\u8981\u6709\u4e00\u500b div \u4f86\u653e\u5f71\u7247\u3002<\/p>\n

<div id=\"player\"><\/div>\n<\/code><\/pre>\n
\u518d\u4f86 JavaScript \u7684\u8d77\u624b\u5f0f\uff0c\u8981\u5148\u8f09\u5165\u7528 Youtube \u7684 igrame API\uff0c<\/p>\n
var tag = document.createElement('script');\n\ntag.src = \"https:\/\/www.youtube.com\/iframe_api\";\nvar firstScriptTag = document.getElementsByTagName('script')[0];\nfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n<\/code><\/pre>\n
\u6216\u8005\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5728 HTML \u5f15\u5165\u5c0d\u61c9\u7684 JavaScript\u3002<\/p>\n
<script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\n<\/code><\/pre>\n
\u518d\u4f86\u770b\u5230\u7b2c\u4e00\u6bb5\uff0c\u9019\u908a\u6307\u5b9a\u4e86\u525b\u525b\u653e\u5728 HTML \u7684 div ( id \u662f player )\uff0c\u4ee5\u53ca\u958b\u59cb\u64ad\u653e\u6642\u5019\u7684\u5f71\u7247\u9577\u5bec\u5c3a\u5bf8\uff0c\u6700\u91cd\u8981\u7684\u662f videoId<\/code> \u9019\u6bb5\uff0c\u9019\u662f\u8981\u64ad\u653e\u5f71\u7247\u7684 ID\u3002<\/p>\n
var player;\nfunction onYouTubeIframeAPIReady() {\n  player = new YT.Player('player', {\n    height: '390',\n    width: '640',\n    videoId: 'M7lc1UVf-VE',\n    events: {\n      'onReady': onPlayerReady\n    }\n  });\n}\n<\/code><\/pre>\n
\u5f71\u7247\u7684 ID \u5728\u54ea\u88e1\u5462\uff1f\u5f71\u7247 ID \u5c31\u662f\u7db2\u5740\u5217 v=<\/code> \u5f8c\u9762\u7684\u9019\u4e00\u4e32\u4ee3\u78bc<\/p>\n
\"Youtube<\/p>\n
\u5728\u4e0a\u9762\u90a3\u6bb5\u7a0b\u5f0f\u78bc\u88e1\uff0cevents<\/code> \u6709\u500b\u5c6c\u6027\u53eb\u505a onReady<\/code>\uff0c\u9019\u8868\u793a\u5728 Youtube \u64ad\u653e\u5340\u57df\u6e96\u5099\u597d\u4e4b\u5f8c\u8981\u505a\u7684\u6d41\u7a0b\u662f onPlayerReady<\/code>\uff0c\u6240\u4ee5\u8981\u64b0\u5beb\u4e00\u6bb5\u5c0d\u61c9\u7684\u6d41\u7a0b\uff0c\u9019\u500b\u6d41\u7a0b\u8868\u793a\u5f71\u7247\u64ad\u653e\u5340\u57df\u6e96\u5099\u597d\u4e4b\u5f8c\uff0c\u5c31\u958b\u59cb\u64ad\u653e\u5f71\u7247\u3002<\/p>\n
function onPlayerReady(event) {\n  event.target.playVideo();\n}\n\n\u6216\u9019\u6a23\u5beb\u4e5f\u53ef\u4ee5\u3002\n\nfunction onPlayerReady() {\n   player.playVideo();\n}\n<\/code><\/pre>\n
\u7136\u5f8c\u53ea\u8981\u57f7\u884c\u7db2\u9801\uff0c\u5c31\u53ef\u4ee5\u770b\u5230 Youtube \u5f71\u7247\u958b\u59cb\u64ad\u653e\u4e86\u3002<\/p>\n
\"\u57f7\u884c\u7db2\u9801\u64ad\u653e<\/p>\n
\u518d\u8aaa\u660e\u4e00\u4e0b\uff0c\u56de\u5230 onYouTubeIframeAPIReady()<\/code> \u9019\u500b\u6d41\u7a0b\uff0c\u5176\u5be6\u88e1\u9762\u7684 player \u9084\u6709\u53e6\u5916\u4e00\u500b\u91cd\u8981\u7684\u5c6c\u6027\u53eb\u505a playerVars<\/code>\uff0c\u9019\u908a\u5305\u542b\u4e86\u5f71\u7247\u4e00\u958b\u59cb\u7684\u8a31\u591a\u5c6c\u6027\u8a2d\u5b9a\uff0c\u5b8c\u6574\u8a2d\u5b9a\u53ef\u4ee5\u53c3\u8003 Player parameters<\/a>\uff0c\u6bd4\u8f03\u5e38\u7528\u7684\u5927\u6982\u5c31\u662fautoPlay<\/code> \u81ea\u52d5\u64ad\u653e\u3001controls<\/code> \u4e0b\u65b9\u63a7\u5236\u9078\u55ae\uff0c\u4ee5\u4e0b\u9762\u7684\u4f8b\u5b50\u4f86\u8aaa\uff0c\u9810\u8a2d\u6703\u81ea\u52d5\u64ad\u653e\uff0c\u7136\u5f8c\u95dc\u9589\u4e0b\u65b9\u63a7\u5236\u9078\u55ae\u3002<\/p>\n
function onYouTubeIframeAPIReady() {\n  player = new YT.Player('player', {\n    height: '390',\n    width: '640',\n    videoId: 'M7lc1UVf-VE',\n    playerVars:{\n      autoplay:1,\n      controls:0\n    },\n    events: {\n      'onReady': onPlayerReady\n    }\n  });\n}\n<\/code><\/pre>\n
\u5982\u679c\u6709\u4ed4\u7d30\u770b API \u6587\u4ef6\u7684\u8a71\uff0c\u4e00\u5b9a\u6703\u767c\u73fe\u6709\u4e00\u500b\u65b9\u6cd5\u53eb\u505a loadVideoByUrl<\/code>\uff0c\u9867\u540d\u601d\u7fa9\u5c31\u662f\u76f4\u63a5\u7528\u7db2\u5740\u5c31\u53ef\u4ee5\u8f09\u5165\u5f71\u7247\uff0c\u7e3d\u662f\u6bd4\u76f4\u63a5\u8cbc ID \u65b9\u4fbf\u5f97\u591a\uff0c\u4f46\u5f88\u53ef\u60dc\u7db2\u5740\u5fc5\u9808\u8981\u9075\u7167\u898f\u7bc4\uff0c\u4e5f\u5c31\u662f\u8981\u9577 http:\/\/www.youtube.com\/v\/VIDEO_ID?version=3<\/code> \u9019\u500b\u6a23\u5b50\u7684\u7db2\u5740\u624d\u53ef\u4ee5\uff0c\u6240\u4ee5\u9019\u500b\u65b9\u6cd5\u57fa\u672c\u4e0a\u4e5f\u4e0d\u662f\u90a3\u9ebc\u7684\u597d\u7528\u3002<\/p>\n
\u5982\u679c\u771f\u7684\u60f3\u8981\u7528\u7db2\u5740\uff0c\u4e0d\u5982\u81ea\u5df1\u5beb\u4e00\u6bb5\u7a0b\u5f0f\u53bb\u7be9\u9078\uff0c\u4e0b\u9762\u9019\u6bb5\u662f\u7be9\u9078 Youtube \u7db2\u5740\u7684\u7a0b\u5f0f\uff0c\u53ea\u8981\u628a\u7db2\u5740\u8cbc\u5728 u \u7684\u5730\u65b9\uff0c\u5c31\u6703\u56de\u50b3 ID \u56c9\uff01<\/p>\n
function getVideoId(u){\n  var v, vid;\n  if(u.indexOf('?v=')!=-1){\n    v = u.split('?v=');\n    if(v[1].indexOf('&')!=-1){\n      vid = v[1].split('&')[0];\n    }else{\n      vid = v[1];\n    }\n    return vid;\n  }else{\n    return u;\n  }\n}\n<\/code><\/pre>\n
Youtube \u64cd\u63a7\u65b9\u6cd5<\/h2>\n
Youtube \u8f09\u5165\u4e4b\u5f8c\u6709\u4e9b\u9810\u8a2d\u7684\u884c\u70ba ( events )\uff0c\u900f\u904e\u9019\u4e9b\u884c\u70ba\uff0c\u6211\u5011\u53ef\u4ee5\u6c7a\u5b9a\u4f55\u6642\u8981\u505a\u4ec0\u9ebc\u4e8b\u60c5\u3002<\/p>\n