如何點影片的連結後，自動進入瀏覽器的全螢幕模式播放

全螢幕瀏覽器

chiquitita 2019-12-12 17:50:03 ‧ 5110 瀏覽

分享至

請問，若有一mp4影片檔(非youtube影片)，如何點此影片的連結後，不用按瀏覽器的功能鍵F11來進入瀏覽器的全螢幕模式，可自動進入瀏覽器的全螢幕模式播放此影片呢？謝謝。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2019-12-12 19:12:59

最佳解答

土砲作法提供您參考...
demo:
http://www.web3d.url.tw/demo/USER/ccutmis/clickVideoLinkFullscreen/

<!DOCTYPE html>
<html lang="zh-tw">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title></head>
<body>
<video id="myvideo" src="" autoplay="" muted="" loop="" controls width="0" height="0"></video>
<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" onclick="clickVideoLink(this.href);return false;">點我觀看全屏影片</a>
<script>
function openFullscreen(targetId) {
  var elem = document.getElementById(targetId);
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
  elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
  elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
  elem.msRequestFullscreen();
  }
}
document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
  if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
    //當全屏影片播放時取消全屏狀態時會觸發的程式碼
    document.getElementById('myvideo').src='';
  }
}
function clickVideoLink(video_url){
  document.getElementById('myvideo').src=video_url;
  openFullscreen('myvideo');
  console.log(video_url);
}
</script>
</body>
</html>

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

阿展展展 iT邦好手 1 級 ‧ 2019-12-12 22:32:35 檢舉

getElementById <3

ccutmis iT邦高手 2 級 ‧ 2019-12-12 22:46:11 檢舉

chiquitita iT邦新手 3 級 ‧ 2019-12-16 09:33:25 檢舉

感謝大家的回覆，點選連結後可全螢幕顯示影片了，想再請教一下，若瀏覽器的首頁要自動全螢幕撥放此影片，也就是不使用onclick來發動，請問該如何調整呢？謝謝。

ccutmis iT邦高手 2 級 ‧ 2019-12-16 10:10:40 檢舉

如果你試著在window.onload事件去呼叫clickVideoLink(影片路徑)
會得到一個'Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture'的錯誤，我上網google好像這是fullscreen api本身設計，要由使用者去觸發事件，
如果是要開啟頁面就全屏播放一個影片的話可能要用別的寫法(例如
另外增加一個video標籤透過css跟js讓它的尺寸在布滿整個畫面，因為這不是video全屏事件所以要另外處理按esc的事件，這邊範例就是當首頁全屏播放影片的時候按esc會把這個影片的style.display設為'none'達到隱藏影片的效果，你了解原理後再依實際需求修改即可)

<!DOCTYPE html>
<html lang="zh-tw">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<style>
#intro_video{display:none;position:absolute;top:0px;left:0px;width:100vw;height:100%;border:solid 1px #f00;background:#000;}
</style>
</head>
<body>
<video id="intro_video" src="" autoplay="" muted="" loop="" controls width="0" height="0"></video>
<div style="background:#aaa;padding:20px 0px;text-align:center;">
原本的首頁內容
</div>
<script>
var is_play_intro=false;
function play_intro_video(video_url){
	document.getElementById('intro_video').src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
	document.getElementById('intro_video').style.display='block';
	is_play_intro=true;
};
window.onload=play_intro_video;

window.addEventListener('keydown', (e) => {
  const keyNum=e.keyCode;
  console.log("keypressed " + keyNum);
  if(keyNum===27){ document.getElementById('intro_video').style.display='none';
  is_play_intro=false;}
});
</script>
</body>
</html>