B站視訊開原始碼flv.js的使用部署心得（程式碼案例應用）

阿新 • • 發佈：2019-01-17

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>

    <style>
        .mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    
    <div class="mainContainer">
        <input name="urlinput" class="urlInput" type="text" value="http://localhost/Test/test1.mp4"/>
        <video name="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">
            Your browser is too old which doesn't support HTML5 video.
        </video>
        <br>
        <div class="controls">
            <button onclick="flv_load()">Load</button>
            <button onclick="flv_start()">Start</button>
            <button onclick="flv_pause()">Pause</button>
            <button onclick="flv_destroy()">Destroy</button>
            <input style="width:100px" type="text" name="seekpoint"/>
            <button onclick="flv_seekto()">SeekTo</button>
        </div>
    </div>

    <script src="flv.min.js"></script>
    
    <script>
        function flv_load() {
            console.log('isSupported: ' + flvjs.isSupported());
            var urlinput = document.getElementsByName('urlinput')[0];
            var xhr = new XMLHttpRequest();
            xhr.open('GET', urlinput.value, true);
            xhr.onload = function (e) {
                var player;
                var element = document.getElementsByName('videoElement')[0];
                if (typeof player !== "undefined") {
                    if (player != null) {
                        player.unload();
                        player.detachMediaElement();
                        player.destroy();
                        player = null;
                    }
                }
              
                player = flvjs.createPlayer({
                    type: 'mp4',
                    url: urlinput.value
                });
                player.attachMediaElement(element);
                player.load();
            }
            xhr.send();
        }

        function flv_start() {
            player.play();
        }

        function flv_pause() {
            player.pause();
        }

        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
            var input = document.getElementsByName('seekpoint')[0];
            player.currentTime = parseFloat(input.value);
        }

        function getUrlParam(key, defaultValue) {
            var pageUrl = window.location.search.substring(1);
            var pairs = pageUrl.split('&');
            for (var i = 0; i < pairs.length; i++) {
                var keyAndValue = pairs[i].split('=');
                if (keyAndValue[0] === key) {
                    return keyAndValue[1];
                }
            }
            return defaultValue;
        }

        var urlInputBox = document.getElementsByName('urlinput')[0];
        var url = decodeURIComponent(getUrlParam('src', urlInputBox.value));
        urlInputBox.value = url;
        
        document.addEventListener('DOMContentLoaded', function () {
            flv_load();
        });
    </script>
    
</body>

</html>

B站視訊開原始碼flv.js的使用部署心得（程式碼案例應用）

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>flv.js demo

無需外掛只使用瀏覽器下載b站視訊

2017.10.

python爬取下載b站視訊

python爬蟲系列：上一篇 python爬取圖蟲網相簿今天突然來了興趣想要爬取下載b站視訊，話不多說，說幹就幹。 Usage 下載倉庫 [email protected]:inspurer/PythonSpider.git 或者直接下載:https://git

樹狀陣列【學習B站視訊筆記】

樹狀陣列 1、樹狀陣列是什麼樹狀陣列是一個查詢和修改複雜度都為log(n)的資料結構。主要用於查詢任意兩位之間的所有元素之和。但是每次只能修改一個元素的值。 2、樹狀陣列幹什麼用的

B站視訊資訊爬蟲python

import warnings import requests from bs4 import BeautifulSoup from pymongo import MongoClient import datetime import time #忽略警告提示 warnings.filterwarn

Bilibili B站視訊快速下載、備份影片 Mp4 格式

很多人會選擇將影片上傳到B站視訊分享，即使是使用於個人網站，也會利用內嵌方式節省流量，不過上傳到網路後必須考量到日後是否可以取回影片。本文要介紹的「Videofk.com」是一款免費的 Bilibili視訊線上下載器，只要開啟網站、輸入要下載的Bilibili影片網址，即可

B站視訊下載（VideoHelper）

繼續上次的知乎爬蟲，這次開始了嗶哩嗶哩的爬蟲實踐；首先介紹下如何下載吧： VideoHelper 裡面有三種方式下載b站視訊。同樣的流程，還是先抓包，分析引數，尋找引數（包括之前的請求包和頁面原始碼），找出視訊真實地址，然後在模擬。抓包是注意

抓取b站視訊地址

還是金鑰。。。這個範例稍微做了點弊, 但還是從頭把分析過程來講一下好了先簡單的從網址猜一下….”av6467776”應該是某個ID之類的東西, 再進一步, ID可能就是這個”6467776” 接下來我們就需要藉助一下Chrome的”開發人員工具

WebMagic入門--爬取b站視訊標題與時間戳Demo

WebMagic入門–爬取b站視訊標題與時間戳Demo 最近對爬蟲有點感興趣，瞭解了一下java相關的爬蟲框架，選用webmagic作為入門。寫了個比官方案例還簡單的Demo，甚至可以用簡陋來形容

docker部署ffserver（docker-compose封裝）播放本地視訊以及推流案例centos7

部署成功後就一個想法：“差之毫釐謬以千里”。以供大家參考注：要按照步驟來部署centos7 FFserver是一個用於音訊和視訊流媒體伺服器 1.建立docker-compose.yml（在自己常用的目錄下方便管理執行） ------------------（配置開始）----

阿里雲伺服器建站之部署 LAMP （CentOS 7.2）

簡介 LAMP指Linux+Apache+Mysql/MariaDB+Perl/PHP/Python是一組常用來搭建動態網站或者伺服器的開源軟體，本身都是各自獨立的程式，但是因為常被放在一起使用，擁有了越來越高的相容度，共同組成了一個強大的Web應用程式平臺。

docker部署ffserver（docker-compose封裝）播放本地視訊以及推流案例

系統版本：Centos7 部署成功後就一個想法：“差之毫釐謬以千里”。以供大家參考注：要按照步驟來部署 FFserver是一個用於音訊和視訊流媒體伺服器 1.建立docker-compose.yml（在自己常用的目錄下方便管理執行） -------------

Saltstack批量部署tomcat（多實例）

自動化運維 saltstack 批量安裝部署上一篇講解了如何批量部署nginx,這篇說一說如何批量部署tomcat,其實方式上都差不多，tomcat多了個java必須配置，以及需要多個實例一起部署。方式方法上可能不是最優方案，功能上是都可以實現基本需求的。環境介紹：Centos 6.5t

js/jq基礎（日常整理記錄）-1-純js格式化時間

seconds form 由於分享 log var d+ 方法 class 一、純js格式化時間　之前記錄了一些，工作中發現的比較常用的使用，就記錄一下。由於很基礎，就直接貼出來了，不做分析了。改造一下Date的原型 Date.prototype.format =

探秘 Java 熱部署三（Java agent agentmain）

des 一個事情 AD read initial virtual ring tran 前言讓我們繼續探秘 Java 熱部署。在前文探秘 Java 熱部署二（Java agent premain）中，我們介紹了 Java agent premain。通過在main方法

探秘 Java 熱部署二（Java agent premain）

業務方法 instr 自己就是還要是我 java 代理命令 # 前言在前文探秘 Java 熱部署中，我們通過在死循環中重復加載 ClassLoader 和 Class 文件實現了熱部署的功能，但我們也指出了缺點-----不夠靈活。需要手動修改文件等操作。

Django+nginx+uwsgi部署教程（centos7+ubuntu16.4）

發生 manage virtual 反向代理服務器 centos 開源 -h sts mage 項目部署教程在線演示 1.1.原理介紹 django 一個基於python的開源web框架 uwsgi 一是一個web服務器，也可以當做中間件 nginx 常用高

實現SpringBoot的熱部署方法（IDEA上操作）

熱部署原理：配置檔案中用了spring-boot-devtools主要是因為這是一個為開發者服務的一個模組，其中最重要的功能就是自動應用程式碼更改到最新的App上面去。原理是在發現程式碼有更改之後，重新啟動應用，但是速度比手動停止後再啟動更快。其深層原理是使用了兩個ClassLoader，

ARM40-A5應用——ARM40檔案的拓荒部署示例（ARM40-reclaim-OTA）

ARM40-A5應用——ARM40檔案的拓荒部署示例（ARM40-reclaim-OTA） 2018.10.9 本文適合ARM40檔案的半自動拓荒部署(即首次部署）。一、ARM40檔案拓荒部署的步驟 1.1、伺服器端檔案伺服器端涉及到的目錄和檔案如下： /

js---js時間線（瀏覽器解析過程）

1、建立Document物件，開始解析web介面。document.readyState='loading'。 2、遇到link外部css，建立執行緒載入，並繼續原執行緒的解析。 3、遇到外部js檔案，並沒設有async/defer的屬性，瀏覽器正常載入js（阻塞），等js載入完成再執行下面的內

B站視訊開原始碼flv.js的使用部署心得（程式碼案例應用）

相關推薦