下面教大家一个高级视频应用。
先看图：
就是像幻灯一样，点击右遍按钮之后
左边直接播放相应视频
先看代码
<script src=”http://www.google.com/jsapi” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(“swfobject”, “2.1”);
</script>
<script type=”text/javascript”>
/*
* Change out the video that is playing
*/// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}// Loads the selected video into the player.
function loadVideo(videoID) {
if(ytplayer) {
ytplayer.loadVideoById(videoID);
}
}// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert(“An error occured of type:” + errorCode);
}// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById(“ytPlayer”);
ytplayer.addEventListener(“onError”, “onPlayerError”);
}// The “main method” of this sample. Called when someone clicks “Run”.
function loadPlayer() {
// The video to load
var videoID = “XMzI3ODk1ODky”
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: “always”,wmode:”transparent”};
// The element id of the Flash embed
var atts = { id: “ytPlayer” };// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
//swfobject.embedSWF(“http://www.youtube.com/v/” + videoID +
// “?version=3&enablejsapi=1&playerapiid=player1”,
// “videoDiv”, “586”, “360”, “9”, null, null, params, atts);
swfobject.embedSWF(“http://static.youku.com/v1.0.0206/v/swf/loader.swf?winType=index&VideoIDS=” + videoID+”embedid=&isAutoPlay=true&isShowRelatedVideo=false&embedid=-&showAd=0″,”videoDiv”, “586”, “360”, “9”, null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
这个是谷歌的一个决绝方案的js代码
下面看html代码
<div id=”videoDiv”><div ><img src=”<?php echo home_url(); ?>/img/loading-thumb.gif” width=”80″ height=”80″ border=”0″ ></div></div>
<div>
<div id=”videoControls”>
<ul>
<li><a href=”#video” onClick=”loadVideo(‘P37bM0TOXMQ’);” title=”City of Steam: Classes & Combat Trailer “> <img src=”<?php echo home_url(); ?>/img/video5.jpg” /></a></li>
<li><a href=”#video” onClick=”loadVideo(‘0BH6OgJM7tc’);” title=”City of Steam: Gardenworks: First Look “> <img src=”<?php echo home_url(); ?>/img/video2.jpg” /></a></li>
<li><a href=”#video” onClick=”loadVideo(‘BiwZJWOigE4’);” title=”City of Steam: Ebonwax Central: Revisited”> <img src=”<?php echo home_url(); ?>/img/video3.jpg”></a></li>
<li><a href=”#video” onClick=”loadVideo(‘4nFyN2JKBhk’);” title=”Mechanist Game -GDC China 2011″> <img src=”<?php echo home_url(); ?>/img/gdc_china_video.jpg” /></a></li>
</ul>
</div></div>
然后就实现了幻灯试视频播放。
此文最后验证youku不可以。。这是google为youtube写的决绝方案js。youbube才可以用。路过的请绕道。。。
等我找到解决方法再发上来。
没办法水平不够。后来我用我新学的jquery搞定了。可是感觉代码不够简洁。。。点击下面链接：
2012-11-07： 这个在中国貌似不好用。。时常链接不上谷歌！！我快要疯了。看我另一个解决方案：http://shanmao.me/?p=1393