如果要崁入影片至網頁，現在可以直接用html5的video標籤，以下為使用方式
<video controls="controls" height="534" id="my-video" poster="your_poster.jpg" preload="preload" width="950">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="http://media.globalonenessproject.org/videos/mp4/laugh-clown-laugh-sd.mp4" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="http://media.globalonenessproject.org/videos/webm/laugh-clown-laugh-sd.webm" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="http://media.globalonenessproject.org/videos/ogg/laugh-clown-laugh-sd.ogv" type="video/ogg" />
</video>
判斷全螢幕切換
$('#video_ID').on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff'; // Now do something interesting
alert('Event: ' + event);
});
全螢幕切換
$('#video_ID').click(function(){
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
})
點擊播放影片
$('#video_ID').click(function(){ this.paused?this.play():this.pause(); })
