YouTube---获取iframe的时间

news/2024/11/30 1:53:05/

YouTube教程

https://developers.google.com/youtube/iframe_api_reference?csw=1

 后台上传YouTube视频链接,获取这个视屏的时长。

主要代码:

1.获取videoId

        // 获取YouTube视频的videoIdfunction matchYoutubeUrl(url) {var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;return (url.match(p)) ? RegExp.$1 : false;}

 

 2.异步引入YouTube提供的api

<script src="https://www.youtube.com/iframe_api"></script>

3.创建YouTube播放器

        var player;function onYouTubeIframeAPIReady() {player = new YT.Player('playerYouTube', {height: '360',width: '640',videoId: matchYoutubeUrl('https://www.youtube.com/embed/MYD4kVqxWTY'), // 改变YouTube视频的videoIdevents: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});}

 4.当视频播放器准备好时,API将调用这个函数

        // 4.当视频播放器准备好时,API将调用这个函数function onPlayerReady(event) {// 视频的时长var YouTubeTime = event.target.getDuration();console.log(YouTubeTime, 'YouTubeTime')event.target.playVideo();}

完整代码:

<body><!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/MYD4kVqxWTY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --><!-- 1.<iframe>(和视频播放器)将取代这个<div>标签。 --><div id="playerYouTube"></div><script>// 获取YouTube视频的videoIdfunction matchYoutubeUrl(url) {var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;return (url.match(p)) ? RegExp.$1 : false;}// 2.此代码异步加载IFrame播放器API代码。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.这个函数创建一个<iframe>(和YouTube播放器)//下载API代码后。var player;function onYouTubeIframeAPIReady() {player = new YT.Player('playerYouTube', {height: '360',width: '640',videoId: matchYoutubeUrl('https://www.youtube.com/embed/MYD4kVqxWTY'), // 改变YouTube视频的videoIdevents: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});}// 4.当视频播放器准备好时,API将调用这个函数function onPlayerReady(event) {// 视频的时长var YouTubeTime = event.target.getDuration();console.log(YouTubeTime, 'YouTubeTime')event.target.playVideo();}var done = false;function onPlayerStateChange(event) {if (event.data == YT.PlayerState.PLAYING && !done) {setTimeout(stopVideo, 6000);done = true;}}function stopVideo() {player.stopVideo();}</script>
</body>

 


http://www.ppmy.cn/news/382799.html

相关文章

python中类的输出或类的实例输出为<__main__类名 object at xxxx>这种形式的原因

今天在复现TSN时发现代码中有一段这样的语句 class VideoRecord(object):def __init__(self, row):self._data rowpropertydef path(self):return self._data[0]propertydef num_frames(self):return int(self._data[1])propertydef label(self):return int(self._data[2])cl…

IDEA默认代码样式的坑,逗号前面默认加上了空格

IDEA默认代码样式的坑&#xff0c;逗号前面默认加上了空格 个人习惯编写完代码&#xff0c;会使用CTRLALTL进行代码格式化&#xff0c;同时设置了提交的时候进行代码重排和格式化。突然有一天&#xff0c;格式化代码之后发现跟仓库的差异文件几百个&#xff0c;吓死。。。 当然…

​DMBOK知识梳理for CDGA/CDGP——第六章 数据存储与操作(附常考知识点)

第六章 数据存储与操作 第六章在CDGA|CDGP考试中的分值占比较少&#xff0c;知识点比较密集&#xff0c;主要考点包括&#xff1a;数据存储与操作的定义、目标、数据库管理员&#xff08;DBA&#xff09;的角色定位及类型、数据处理的类型ACID和BASE的区别、数据库环境、活动、…

JAVA SMART系统-系统框架设计与开发(源代码+论文)

SMART系统是一个新型智能在线考试信息管理系统,该系统主要实现了学生在线考试与评估以及教师对学生在线考试信息的管理和维护。本文按照SMART系统的非功能性需求,基于Struts、Spring、Hibernate三种开源技术,构建了一个具有良好的可扩展性、可维护性、可靠性的系统框架。整个…

获取地理位置请求免费天气接口

需求&#xff1a;根据地理位置信息去请求免费的天气接口数据&#xff0c;拿到数据后进行展示&#xff0c;这边我用到了俩个key&#xff0c;一个是高德天气的key和心知天气的key&#xff0c;为什么要这么麻烦呢&#xff0c;是因为之前写过一版不需要获取地理位置&#xff0c;直接…

linux服务器测网速,linux服务器如何测试网速?

以下测试方法仅适用于linux主机测试自己的电脑到网络服务提供商的网络连接速度。Speedtest的工作原理并不复杂&#xff0c;它在你的浏览器中加载JavaScript代码并自动检测离你最近的Speedtest服务器&#xff0c;然后向服务器发送HTTP GET and POST请求来测试上行/下行网速。 l…

网速上传的怎么测试软件,怎么测网速(教你快速测试自家网速)

上网又卡了&#xff1f;看视频缓冲个不停&#xff1f;正在激烈进行的团战出现卡顿&#xff1f;……&#xff0c;自己明明办理的是高速的宽带套餐&#xff0c;为什么还会出现这种情况&#xff1f;在我们觉得网络速度很百思特网慢的时候&#xff0c;普通用户很难知道自己现在确切…

手机ping软件测试网速,网速测试 - wifi测网速,网络ping test

实时流量 - 4G移动流量管家手机营业厅助手 0人评论7.1|13.80MB 最符合中国国情的流量监控插件来了&#xff01;√ 流量套餐、流量上月结余、套餐外流量包&#xff0c;一个不能少&#xff01;√ 流量插件不后台运行&#xff0c;找不到比它更省电的了&#xff01;√ 你是否觉的打…