admin 管理员组

文章数量: 1184232

YouTube

YouTube教程

=1

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

主要代码：

1.获取videoId

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

 

 2.异步引入YouTube提供的api

<script src=""></script>

3.创建YouTube播放器

        var player;function onYouTubeIframeAPIReady() {player = new YT.Player('playerYouTube', {height: '360',width: '640',videoId: matchYoutubeUrl(''), // 改变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="" 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\\/(?: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 = "";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(''), // 改变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>

 

本文标签： YouTube

版权声明：本文标题：YouTube 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1698931159a319548.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。