前言
不論博客系統(tǒng)是WordPress還是Typecho,繞不開的是兩種書寫語言,一種稱之為富文本,一種叫做Markdown。
Markdown有很多好處,也有很多壞處,比如Markdown本身不具備段落居中的功能,以及Markdown也不具有插入視頻的功能。
HTML語法
慶幸的是Markdown支持HTML的標(biāo)簽,可以在HTML中通過<video>
標(biāo)簽插入視頻,在Markdown中,我們同樣可以使用<video>
標(biāo)簽插入視頻,具體格式如下:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
或者
<video src="movie.mp4.mp4" controls="controls" width="500" height="300"></video>
當(dāng)然,除了.mp4
它還支持其他的格式,但對于不同的瀏覽器支持的格式不一樣,見下表:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | - |
MPEG4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | - |
此外,還有編碼等限制,這里就不再介紹,感興趣的小伙伴可以百度上學(xué)習(xí)一下。
video 標(biāo)簽允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識別的格式,這樣我們只要多準(zhǔn)備幾個(gè)不同格式的視頻就可以了。
用法:
1. <video width="500" height="250" controls="controls">
2. <source src="movie.ogg" type="video/ogg">
3. <source src="movie.mp4" type="video/mp4">
4. </video>
其次,這是對一些參數(shù)的說明:
autoplay: 出現(xiàn)該屬性意味著視頻在就緒后將自動(dòng)播放,用法:autoplay="autoplay"
controls: 出現(xiàn)該屬性意味著向用戶顯示控件,如播放按鈕等,用法:controls="controls"
height: 設(shè)置高度
width:設(shè)置寬度
loop:自動(dòng)重播,用法:loop="loop"
preload: 視頻在頁面加載時(shí)進(jìn)行加載并預(yù)備播放,用法:
preload="auto" - 當(dāng)頁面加載后載入整個(gè)視頻;
preload="meta" - 當(dāng)頁面加載后只載入元數(shù)據(jù);
preload="none" - 當(dāng)頁面加載后不載入視頻。
注意:若使用了autoplay,則忽略preload
src: 要播放視頻的url
video 標(biāo)簽插入本地視頻
-
將視頻文件復(fù)制到Hugo博客的項(xiàng)目文件夾中的一個(gè)特定位置,例如
static/videos/
目錄下。確保視頻文件在該目錄下可用。 -
在Hugo博客的內(nèi)容文件夾中找到想要添加視頻的文章或頁面。通常,這些文件位于
content/
目錄下,具有.md
或.markdown
擴(kuò)展名。 -
使用文本編輯器打開文章或頁面文件。
-
在要插入視頻的位置,使用以下Markdown語法添加視頻標(biāo)記:
<video src="/videos/your-video-filename.mp4" autoplay="true" controls="controls" width="800" height="600">
</video>
確保將 your-video-filename.mp4
替換為實(shí)際的視頻文件名。請注意,路徑以 /videos/
開頭,這是視頻文件在靜態(tài)文件夾中的相對路徑。
-
保存并關(guān)閉文件。
-
運(yùn)行Hugo命令以生成的博客。可以使用以下命令:文章來源:http://www.zghlxwxcb.cn/news/detail-722061.html
hugo
- 在生成的博客中查看文章或頁面,視頻應(yīng)該嵌入其中。
請注意,視頻格式支持可能因使用的Hugo主題而異。確保視頻文件格式與主題兼容(通常支持常見的視頻格式如MP4、WebM等)。
iframe 標(biāo)簽插入本地視頻
如果想使用 <iframe>
標(biāo)簽來嵌入本地視頻,可以按照以下步驟進(jìn)行操作:
-
將視頻文件復(fù)制到Hugo博客的項(xiàng)目文件夾中的一個(gè)特定位置,例如
static/videos/
目錄下。確保視頻文件在該目錄下可用。 -
在Hugo博客的內(nèi)容文件夾中找到想要添加視頻的文章或頁面。通常,這些文件位于
content/
目錄下,具有.md
或.markdown
擴(kuò)展名。 -
使用文本編輯器打開文章或頁面文件。
-
在要插入視頻的位置,使用以下Markdown語法添加
<iframe>
標(biāo)簽:
<iframe src="/videos/your-video-filename.mp4" width="640" height="360" frameborder="0" allowfullscreen></iframe>
確保將 your-video-filename.mp4
替換為實(shí)際的視頻文件名。請注意,路徑以 /videos/
開頭,這是視頻文件在靜態(tài)文件夾中的相對路徑。
-
調(diào)整
<iframe>
標(biāo)簽的寬度(width)和高度(height)屬性,以適應(yīng)希望視頻顯示的尺寸。 -
保存并關(guān)閉文件。
-
運(yùn)行Hugo命令以生成的博客。可以使用以下命令:
hugo
- 在生成的博客中查看文章或頁面,的視頻應(yīng)該嵌入其中。
請注意,使用 <iframe>
嵌入本地視頻時(shí),需要確保視頻文件格式與瀏覽器兼容,并且瀏覽器支持該視頻格式。另外,某些安全策略可能會(huì)限制在 <iframe>
中加載本地文件。如果遇到問題,可以嘗試將視頻文件上傳到可公開訪問的文件托管服務(wù),并使用其提供的嵌入代碼。文章來源地址http://www.zghlxwxcb.cn/news/detail-722061.html
到了這里,關(guān)于(三) Markdown插入互聯(lián)網(wǎng)或本地視頻解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!