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

8723
次閱讀
使用HTML5設計網頁只要使用VIDEO標籤即可完成,大大減少以前引用外掛的網頁語法,使用內建瀏覽器播放影片,在iPhone上往往無法自動播放網頁影片,我們利用一些小技巧示範,您可以使用iPhone或iPad打開我們這個網頁,看看影片是否會自動播放。

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