HTML5網頁影片如何設計在iPhone上自動播放

HTML5網頁影片如何設計在iPhone上自動播放

有許多手機網頁會放置背景影片，看起來整個網站更加生動活潑。但是有許多手機採用IOS系統，基於APPLE政策，影片需要手機持有人按下播放鈕才會開始動作，這樣網頁設計師想要表現的視覺將大大扣分，我使用IOS 10裝置測試，利用canvas-video-player修改，增加iPad、iPhone、iPod判斷，使用iPhone手機看本網頁會自動播放影片了。

圖片尺寸640*480pixel

因為在github.com上的canvas-video-player.js不斷被更新，有可能修改行數跟本篇教學有差異，需要網友自行比對修改處。

1. 找出下面程式語法:

   	this.options = {
   		framesPerSecond: 25,
   		hideVideo: true,
   		autoplay: false,
   		audio: false,
   		timelineSelector: false,
   		resetOnLastFrame: true,
   		loop: false
   	};

   修改成

   	this.options = {
   		framesPerSecond: 25,
   		hideVideo: true,
   		autoplay: false,
   		makeLoop: false,
   		pauseOnClick: true,
   		audio: false,
   		timelineSelector: false,
   		resetOnLastFrame: true,
   		loop: false
   	};
   

2. 找出下面程式語法:

   	this.canvas.addEventListener('click', cvpHandlers.canvasClickHandler = function() {
   		self.playPause();
   	});
   

   修改成

   	if(this.options.pauseOnClick === true){
   		this.canvas.addEventListener('click', cvpHandlers.canvasClickHandler = function() {
   			self.playPause();
   		});
   	}
   

3. 找出下面程式語法:

   	if (this.video.currentTime >= this.video.duration) {
   		this.playing = false;
   
   		if (this.options.resetOnLastFrame === true) {
   			this.video.currentTime = 0;
   		}
   
   		if (this.options.loop === true) {
   			this.video.currentTime = 0;
   			this.play();
   		}
   	}
   

   修改成

   	if (this.video.currentTime >= this.video.duration) {
   		if(this.options.makeLoop === false){
   		this.playing = false;
   		}
   
   		if (this.options.resetOnLastFrame === true) {
   			this.video.currentTime = 0;
   		}
   
   		if (this.options.loop === true) {
   			this.video.currentTime = 0;
   			this.play();
   		}
   	}
   

4. 網頁中宣告以下JavaScript指令:

   var canvasVideo = new CanvasVideoPlayer({
   		videoSelector: '原始HTML5影片CLASS名稱',
   		canvasSelector: '要使用canvas的區塊CLASS名稱',
   		timelineSelector: false,
   		autoplay: true,
   		makeLoop: true,
   		pauseOnClick: false,
   		audio: false
   	});

• publisher:
• 文網股份有限公司
• 

  圖片尺寸240*240pixel