一：简介
IFrame Player API 是YouTube提供的官方播放器api
优点：1.官方api有保障
2.加载速度快
3.官方提供了大量播放器方法 如 player.loadVideoById() 视屏加载方法
缺点：1.无法改变视屏质量 player.setPlaybackQuality()是无效API
官方文档：
https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality
二：播放器实现 网页播放器
废话不多说上图上真相
实现
1.youtube.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="player-revised.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<script src="https://www.youtube.com/iframe_api">
<div id='player'>
<script src="player-revised.js">
</html>
2.player-revised.css
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #000000;
overflow: hidden;
position: fixed;
}
3.player-revised.js(核心)
var player;
var timerId;
var nextSong;
function onYouTubeIframeAPIReady(){
player =new YT.Player('player', {
height:'100%',
width:'100%',
// videoId:'1s84rIhPuhk',
// host: 'https://www.youtube.com',
playerVars: {
'controls':0,
'autoplay':1,
'loop':1,
'enablejsapi':1,
'fs':0,
'rel':false,
'showinfo':0,
'iv_load_policy':3,
'modestbranding':1,
'cc_load_policy':0,
},
events: {
onReady: onPlayerReady,
onStateChange:function (event) { sendPlayerStateChange(event.data) },
},
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function hideAnnotations() {
document.body.style.height ='1000%';
document.body.style.width ='1000%';
document.body.style.transform ='scale(0.1)';
document.body.style.transformOrigin ='left top';
}
function sendPlayerStateChange(playerState) {
clearTimeout(timerId);
console.log("playerState"+playerState);
// window.print("打印"+playerState);
if (playerState ==1) {
}else if (playerState == YT.PlayerState.ENDED) {
//实现循环播放
player.stopVideo();
// player.playVideo();
loadById(nextSong,0);
}else if(playerState ==5){
player.playVideo();
}
}
function setNextSong(id) {
nextSong = id;
return '';
}
function play() {
player.playVideo();
return '';
}
function pause() {
player.pauseVideo();
return '';
}
function loadById(id, startAt) {
player.loadVideoById(id, startAt);
return '';
}
function cueById(id, startAt) {
player.cueVideoById(id, startAt);
return '';
}
function getCurrentPosition(){
//返回当前播放时间
return player.getCurrentTime();
}
function mute() {
player.mute();
return '';
}
function unMute() {
player.unMute();
return '';
}
function setVolume(volume) {
player.setVolume(volume);
return '';
}
function seekTo(position, seekAhead) {
player.seekTo(position, seekAhead);
return '';
}
三：成果
四:android 实现播放器
1.webView设置
WebSettings webSettings = webView.getSettings();
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
//控制webview是否需要用户手动点击播放
webSettings.setMediaPlaybackRequiresUserGesture(false);
webView.addJavascriptInterface(this,"android");
webView.loadUrl("file:///android_asset/youtube.html");
2.进行播放
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
webView.evaluateJavascript("loadById(\"1s84rIhPuhk\", 0)", new ValueCallback() {
@Override
public void onReceiveValue(String s) {
Log.d("zzz","我加载完视频了"+s);
}
});
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
});
完美！
网友评论