透過video.js這個外掛程式就可以輕鬆達成我們的需求，範例程式碼如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" autoplay preload="auto" width="" height="" data-setup='{"example_option":true}'>
<source src="http://127.0.0.1/my.mp4" type='video/mp4' />
</video>
</body>
<script type="text/javascript">
var user_width=document.documentElement.clientWidth;
var user_height=document.documentElement.clientHeight;
document.getElementById("example_video_1").width=user_width;
document.getElementById("example_video_1").height=user_height;
</script>
<script type="text/javascript">
var myPlayer = _V_("example_video_1");
var myFunc = function(){
document.location.href="http://127.0.0.1/1.php";
};
myPlayer.addEvent("ended", myFunc);
</script>
</html>
說明：
綠色javascript的部份，是謝晒為了讓影片可以放到全螢幕才加的，這段並不是必須的，如果想知道更多抓取螢幕長寬的方式，可以參考[Android][HTML][JavaScript] 超簡單！讓網頁自動切換到手機版網頁(行動裝置版本)
螢幕長寬如果不對 可以改用document.body.clientWight及document.body.clientHeight
藍色javascript的部份，是因為video.js有提供api的方式去設定參數，設定方式可參考這邊，謝晒這邊設定的是，當影片播放完畢，會自動導向1.php這個網頁。
No comments:
Post a Comment