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

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

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

因為在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