初识flv.js
初識flv.js
flv.js 做了三件事：
一.前言
在了解flv.js之前，我們先來了解關于視頻和音頻的一些基本用法。h5中給我們友好的API video、audio。其中，在我們創建這個多媒體節點的時候，我們可以設置它的屬性，做出自己想要的控制樣式等
1.）創建
<video src="movie.ogg" controls="controls"> 您的瀏覽器不支持 video 標簽。 </video>2.）以下列出原生video常用的一些屬性
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| poster | url | 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。 |
| src | url | 要播放視頻的地址 |
3.)支持全局屬性、事件屬性
以下列舉一些常用的全局屬性：
| 獲取視頻時長 | videoDOM.duration |
| 獲取當前播放時間 | videoDOM.currentTime |
| 設置當前播放位置 | videoDOM.currentTime |
以下列舉一些常用的事件屬性：
在我們不需要controls屬性的時候，往往需要手動js去控制它的播放情況，這是就需要用到事件屬性
| onplay | script | 當媒介已就緒可以開始播放時運行的腳本。 |
| onpause | script | 當媒介被用戶或程序暫停時運行的腳本。 |
| ondurationchange | script | 當媒介長度改變時運行的腳本。 |
例(ps:環境vue)：
<video :src="url" ref="video"></video> <button @click="play">播放</button> let videoDOM = this.$refs.video console.log(videoDOM.duration) // 獲取視頻時長 video.currentTime = 0 // 設置當前播放位置 // [play 播放視頻] play () {this.videoDOM.play() }簡單的說下video,接下來我們將正式介紹flv.js
二.flv.js
什么是flv.js?它是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發，沒有用到 Flash，由 bilibili 網站開源。
對于flv.js，很多人都說很好，但是我發現很難去查找到相關細致的說明文檔。只好看下源碼啦
1.）了解flv.js
HTML5 原生僅支持播放 mp4/webm 格式，flv.js 實現了在 HTML5 上播放 FLV 格式視頻
2.）操作
flv.js 官網: https://www.bootcdn.cn/flv.js/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flv.js教程</title> </head> <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script> <video id="videoElement"></video> <script>if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://fed.dev.hzmantu.com/oa-project/bce0c613e364122715270faef1874251.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();} </script> </html>總結
- 上一篇： 动态聚类法
- 下一篇： dita文档_使用DITA和SKOS进行