web 前端学习之制作网页视频
生活随笔
收集整理的這篇文章主要介紹了
web 前端学习之制作网页视频
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
制作網頁視頻
- 1. 準備視頻文件
- 2. 引用視頻文件
- 3. 完整代碼如下
- 4. 問題解決
1. 準備視頻文件
先準備好視頻文件，放入 img 目錄下
2. 引用視頻文件
video 是HTML的視頻標簽；
<video width="320" height="240" controls autoplay> <!-- 設置邊框 --><source src="img/4~1.mp4" type="video/mp4" /> <!--引用視頻文件--> </video>3. 完整代碼如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>web 前端學習之制作網頁視頻</title></head><body><video width="320" height="240" controls autoplay> <!-- 設置邊框 --><source src="img/4~1.mp4" type="video/mp4" /> <!--引用視頻文件--></video></body> </html>執行結果如下所示：
4. 問題解決
問題： 在寫完代碼后，運行，有可能會出現視頻沒有畫面的情況；
解決方法： 下載 格式工廠 ，在格式工廠里轉換一下就行了；
第一步：設置轉換后的文件輸出到哪個文件夾下
第二步：將視頻文件拖入到軟件中，點擊配置，看一下視頻編碼是否是H264
第三步：
第四步：找到視頻文件輸出文件夾（我的是放到桌面上），HTML引用輸出的視頻文件，即可解決。
總結
以上是生活随笔為你收集整理的web 前端学习之制作网页视频的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H5+springboot（集成ffmp
- 下一篇： 前端获取视频第一帧作为封面