使用video.js 播放youtube视频—

支持：

youtube.com以及youtu.be
常规网址：http：//www.youtube.com/watch？v = xjS6SftYQaQ
嵌入式网址：http：//www.youtube.com/embed/xjS6SftYQaQ
播放列表网址：http：//www.youtube.com/playlist?list = PLA60DCEB33156E51F或http://www.youtube.com/watch?v=xjS6SftYQaQ&list=SPA60DCEB33156E51F

上代码：

<!DOCTYPE html>
<html>
<head><link href="css/video-js-cdn.css" rel="stylesheet"><script type="text/javascript" src="js/app/jquery-3.1.1.min.js" ></script><script src="js/app/video.min.js"></script><script src="js/app/Youtube.js"></script>
</head>
<style>body{margin: 0;}#vid1{width: 100%;height: 100vh;}.vjs-default-skin .vjs-big-play-button {display: none;}
</style>
<body><video id="vid1" class="video-js vjs-default-skin" autoplay controls webkit-playsinline playsinline></video>
</body><script>/*获取视频，创建播放器*/var urldata = "https://www.youtube.com/watch?v=xjS6SftYQaQ";;var player = videojs('vid1',{techOrder:["youtube"],sources: [{ type: "video/youtube",src: urldata}],youtube: {playlist: "2_HXUhShhmY,lLJf9qJHR3E"},loop:true,//循环播放autoplay:true,//自动播放playsinline: 1,//禁止在IOS app 上自动全屏muted: false}, function onPlayerReady() {this.play();});/*关闭*/function onVideoStop(){$("body").html('<video id="vid1" class="video-js vjs-default-skin" autoplay controls webkit-playsinline playsinline></video>')}</script>
</html>

说明：关于IOS app上自动全屏，请把参数playsinline 设为1，另外Obj-C 设置：webview.allowsInlineMediaPlayback = YES;

使用video.js 播放youtube视频——踩坑记1相关推荐

m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记移动端的样式问题「1. 安卓 font-weight:700;以上才被认为是加粗.」「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
video.js播放rtmp直播源和hls直播源
看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放 video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash, ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
video.js 播放流媒体
video.js 播放流媒体新人博主请多关照,若有侵权,联系改正.谢谢参考博客地址:https://www.cnblogs.com/FHC1994/p/9981440.html https:/ ...
web三件套（经验贴）Google里，video标签播放mkv视频文件
video标签播放mkv视频文件第一次: <embed src="咏春.mkv" hidden="no" loop="true" R ...

使用video.js 播放youtube视频——踩坑记1

使用video.js 播放youtube视频——踩坑记1相关推荐

最新文章

热门文章