MP4影音如何嵌入網頁(編輯器)中？

MP4影音如何嵌入網頁(編輯器)中？ 2018/1/31 / 系統說明: 回上頁

MP4影片自動播放(含手機) 範例

MP4影片一般播放(不含手機) 範例

MP4影片程式碼範例

程式語法編輯儲存做法：
1、將如下程式碼複製並貼存於如下圖編輯器右上角的切換鈕，

愛屋自動縮放、自動播放版：如上↑

<div class="header_media with_search_5"><div class="wpestate_header_video full_screen_no parallax_effect_no"><video id="hero-vid" class="header_video" poster="" width="100%" height="100%" autoplay="" muted="" loop=""><source src="https://www.houseol.com.tw/admin/video/1608266435390.mov" type="video/mp4"><source src="" type="video/webm"><source src="" type="video/ogg"></video></div></div>

愛屋官網首頁自動縮放、自動播放版：如上↑

<center><div class="moviebox"><video width="100%" height="" autoplay="autoplay" poster=""> <source src="https://d3j06uq18x1o3j.cloudfront.net/local/beecut.com/video/banner.mp4" type="video/mp4">  您的瀏覽器不支援HTML 5影片播放標籤<video>格式。  Your browser doesn’t support the <video> tag. </video></video></video></div></center>

愛屋自動縮放版：

<center><video width="800" height="450" controls="autoplay" poster="http://elearning.915.tw/houseol/logo2_500-0.png"> &nbsp;<source src="https://d3j06uq18x1o3j.cloudfront.net/local/beecut.com/video/banner.mp4"  type="video/mp4"> &nbsp; 您的瀏覽器不支援HTML 5影片播放標籤<video>格式。 &nbsp; Your browser doesn’t support the <video> tag. </video></video></video> </center>

2、切換為【編輯模式】處理後，

3、再轉回【預覽模式】後再按存檔，
4、完成!

PS.

紅色字：可以替換成指定影片網址連結。
藍色字：可以更換預覽圖檔。
width="100%" 表示：寬設定為螢幕的100%(隨螢幕大小而縮放!)

【預覽模式】

【編輯模式】

活動花絮

2018/1/31 / 系統說明