视频怎么转换html代码实现,音视频格式转换神器与html视频元素加字幕——零基础自学网页制作...
音視頻格式轉換神器——格式工廠
如果您下載了上一篇《為HTML頁面添加音頻、視頻的方法——零基礎自學網頁制作》(目錄在結尾)中的素材,您會看到有這樣一個文件,如圖
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
這就是格式工廠軟件的安裝程序
提取碼:td80
因為格式工廠是免費軟件,所以大家直接安裝就可以了,不需要序列號,安裝過程如下:
1.雙擊安裝程序
2.選擇安裝盤符
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
3.等待進度條跑完就好了。大家注意,安裝時一定要閱讀提示,一些沒必要的捆綁軟件記得不要安裝!
完成安裝后,點擊"開始"菜單,如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
這樣我們就可以打開格式工廠了,打開后如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
通過這個菜單我們可知,這個軟件不僅可以為音頻、視頻轉換格式,還可以給圖片轉換格式。如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
下面我們就來操作一下如何為視頻轉換格式。
step1.點擊"視頻"
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
點擊后是這樣的,點擊"AVI FLV MOVE"這個區域。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
效果如下,出現了一個新的菜單。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
step2.選擇要轉換的格式,如圖,我們先選擇ogg,點擊!
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
點擊"確定"
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
彈出這樣一個菜單:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
step3.選擇文件,如圖,點擊"添加文件"
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
我們使用"利維坦.mp4"這個文件進行轉換,如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
點擊"打開"后,跳到這個界面,如下圖,然后點擊確定。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
這時界面就跳回最初的界面上,如下圖,點擊開始,如紅框中。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
step4.等待轉換完成,如圖所示:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
然后點擊"輸出文件夾"按鈕找到轉換好的文件,如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
這時,我們可以把這個轉換好的文件拷走。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
完成之后,大家可以按照上述步驟繼續轉換出swf、flv格式的視頻文件。
轉換音頻和視頻的步驟類似,大家可以在音頻欄中進行選擇相應格式并操作。
格式工廠除了音視頻格式轉換外,也具有簡單的圖片處理,視頻拼接,錄屏等功能,感興趣的小伙伴可以自行測試。
HTML中兼容不同瀏覽器的音視頻元素寫法
學過上一篇《》的小伙伴都會知道,目前音頻也好、視頻也好有非常多的格式存在,不同瀏覽器能支持的格式也不盡相同,就拿swf文件看,2019年以后版本的火狐瀏覽器就不再支持了(還可以通過一些特殊手段播放,這里指的是常規的html標簽用法)。而chrome(google瀏覽器)在使用標簽導入swf文件后就可以播放,示例代碼如下:
音視頻導入在chrome中可以打開。不過要用戶允許使用flashplayer才行,如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
這時我們發現,在默認情況下,播放器控制面板并沒有出現。
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
使用ie瀏覽器卻不能打開,因為針對swf文件,ie瀏覽器需要使用標簽。示例代碼如下:
如圖所示:沒有正常顯示的是標簽,打開的是標簽,并且有控制器。如圖:
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
實際上swf是個歷史遺留問題,主要是針對ie瀏覽器來播放swf或其他需要flashplayer支持的視頻格式。的標簽則用來解決非ie瀏覽器中播放swf或其他需要flashplayer支持的視頻格式。
而蘋果瀏覽器壓根就不支持swf這一類的文件。
目前網絡視頻格式基本上都統一為MP4格式了,在html5標準中,標簽頁取代了和標簽來播放視頻,同時支持多種格式選擇的代碼模式,示例代碼如下:
它的結構是標簽中套入了多個標簽來指定不同格式的文件,同時并列套入一個標簽,在標簽中再套入一個標簽。這樣的寫法的目的是為了讓使用各種各樣的瀏覽器的用戶都可以打開視頻。這種寫法目前是html認為的最好的寫法。
大家可以試一試,使用之前轉好的不同格式的視頻。
大家回想一下,導入不同格式音頻的寫法也是這個樣子,示例代碼如下:
Your browser does not support the audio element.
其他的兼容方法
在w3school的說明中給出了一種包打一切的方法,說起來有點搞笑。
視頻的話,w3school建議可以上傳優酷,然后使用這樣的代碼嵌入自己的頁面中,官方示例代碼如下:
當然也可以使用我們之前在《》這篇教程中講到的優酷官方推薦的標簽的寫法。
音頻的話,可以調用免費的在線雅虎播放器來播放,官方示例代碼如下:
首先使用一個標簽,使用href屬性指定音頻文件的路徑。然后使用標簽來啟東雅虎播放器的JavaScript程序來播放。這個
出于好奇我試了試,代碼如下:
Play Sound
總結
以上是生活随笔為你收集整理的视频怎么转换html代码实现,音视频格式转换神器与html视频元素加字幕——零基础自学网页制作...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 京东支付-付款码支付测试不通原因在这
- 下一篇: FFmpeg拼接文件常见问题