Video.js – 基本播放以及字幕

Posted on 2018-10-17 by hoyo

水平居中、高度固定的播放器

Flex实现水平垂直居中.md

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title></title>
    <link rel="stylesheet" href="/Component_Front/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="video-js-7.2.4/video-js.min.css"/>
    <style>
        .flex{
            display:flex;
            align-items:center;
            justify-content:center;
            background-color:#000;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="flex" style="height: 400px;">
                <video id="my-player" class="video-js vjs-big-play-centered" >
                    <source src="EP01.mp4" type='video/mp4'>
                </video>
            </div>
        </div>
    </div>
</div>

<script src="video-js-7.2.4/video.min.js"></script>
<script>
    videojs('my-player', {
        controls: true,
        autoplay: false,
        preload: 'auto',
        width: 960,
        height: 400
    });
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>

<style>

.flex{

display:flex;

align-items:center;

justify-content:center;

background-color:#000;

}

</style>

</head>

<body>

</video>

</div>

videojs('my-player', {

controls: true,

autoplay: false,

preload: 'auto',

width: 960,

height: 400

});

</script>

</body>

</html>

以下為完成意義圖

—

字幕

WebVTT Example

要讓影片加上字幕只須加上 <track> 即可，例如這樣

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="flex" style="height: 400px;">
                <video id="my-player" class="video-js vjs-big-play-centered" >
                    <source src="EP01.mp4" type='video/mp4'>
                    <track kind='captions' src="EP01.srt" label="Chinese" default />
                </video>
            </div>
        </div>
    </div>
</div>

</video>

</div>

不過還需要注意字幕格式

原始的字幕

1
00:00:34,574 --> 00:00:40,305
片名：《終極面試》
翻譯：Blue

2
00:01:52,800 --> 00:01:54,879
這是你應得的

00:00:34,574 --> 00:00:40,305

片名：《終極面試》

翻譯：Blue

00:01:52,800 --> 00:01:54,879

這是你應得的

這個字幕是不能直接使用，必須做以下修改

WEBVTT
1
00:00:34.574 --> 00:00:40.305
片名：《終極面試》
翻譯：Blue

2
00:01:52.800 --> 00:01:54.879
這是你應得的

WEBVTT

00:00:34.574 --> 00:00:40.305

片名：《終極面試》

翻譯：Blue

00:01:52.800 --> 00:01:54.879

這是你應得的

開頭加上 WEBVTT
將時間小數點的逗號改為小數點

—

自訂字幕格式

WebVTT: The Web Video Text Tracks Format

設定靠左對齊、黃色字

00:00:00.000 --> 00:00:40.305 line-left align:left
<c.yellow.bg_blue>片名：《終極面試》</c>
翻譯：Blue

00:00:00.000 --> 00:00:40.305 line-left align:left

<c.yellow.bg_blue>片名：《終極面試》</c>

翻譯：Blue

CSS

.video-js .vjs-text-track-display .yellow{
    color: yellow;
}

.video-js .vjs-text-track-display .yellow{

color: yellow;

}

—

FFmpeg 將字幕檔和影片合併

Posted on 2018-10-16 by hoyo

FFmpeg 將影片合併字幕檔

HowToBurnSubtitlesIntoVideo

> ffmpeg -i a.mkv -vf subtitles=a.ass a.mp4

1	> ffmpeg -i a.mkv -vf subtitles=a.ass a.mp4

或使用 ass filter 指定 ass 字幕

> ffmpeg -i a.mkv -vf "ass=a.ass" a1.mp4

1	> ffmpeg -i a.mkv -vf "ass=a.ass" a1.mp4

預設的字型因為原本是簡體字字幕對於正體字顯示效果不佳，所以需要調整設定

—

ass 字幕

SSA、ASS 參數-攻略

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: ENG.雅黑,標楷體,20,&H00FFFFFF,&H00000000,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,1,1,2,5,5,10,1

[V4+ Styles]

Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding

Style: ENG.雅黑,標楷體,20,&H00FFFFFF,&H00000000,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,1,1,2,5,5,10,1

設定關閉粗體、20 大小、標楷體字型

—

Docker – 網址轉 Port

Posted on 2018-10-12 by hoyo

使用 Docker 在一台主機上執行多 HTTP Service，因為需要 Port 對外，如果看不懂網路其他的設定不妨參考 Hoyo 的思路

Hoyo 的作法是使用一台 Docker container 安裝 Nginx 來提供 Proxy Pass 功能，將網址直接轉到 container。

此方法的好處是，新增子 HTTP Service 只須 docker run 不需要設定其他網路設定，對於 Nginx 只需要新增 conf 重新啟動 nginx service 後即可啟用，也不需要變更 container

—

Nginx container

Nginx 的主機選擇的是 Debian Linux ，所以須先 pull 一個 debian 環境，在此使用的是 debian:9 ，然後是安裝 nginx

How To Install Nginx on Debian 9

# apt install -y nginx

1	# apt install -y nginx

—

子 HTTP Service container

實際提供 HTTP 服務的容器，使用的也是 Debian:9 ，然後安裝的是 Apache 2.4 藉以和 Proxy Pass 區隔，當然使用 Nginx 也可以

—

子 WWW 啟動

子 WWW 啟動不需要啟動 port 對應

# docker run --name="www1" -d hoyo/httpd:v6

1	# docker run --name="www1" -d hoyo/httpd:v6

查詢 contriner IP address

# docker inspect www1 | grep IPAddress
            "SecondaryIPAddresses": null,
            "IPAddress": "172.17.0.2",
                    "IPAddress": "172.17.0.2",

# docker inspect www1 | grep IPAddress

"SecondaryIPAddresses": null,

"IPAddress": "172.17.0.2",

How to get a Docker container’s IP address from the host?

# docker inspect -f '{{.Name}} - {{.NetworkSettings.IPAddress }}' $(docker ps -aq)
/www2 - 172.17.0.4
/nginx - 172.17.0.3
/www1 - 172.17.0.2

# docker inspect -f '{{.Name}} - {{.NetworkSettings.IPAddress }}' $(docker ps -aq)

/www2 - 172.17.0.4

/nginx - 172.17.0.3

/www1 - 172.17.0.2

—

使用 Nginx 將多 container WWW 服務轉到網址

How do I point my custom domain to my IP:Port (41.111.20.36:8080)?

# docker run --name="nginx" -p 80:80 -itd  debian/nginx:v1 bash

1	# docker run --name="nginx" -p 80:80 -itd debian/nginx:v1 bash

vi /etc/nginx/sites-available/www1

server {
    listen 80;
    server_name www1.hoyo.idv.tw;

    location / {
        proxy_set_header Host $host;
        proxy_pass http://172.17.0.2;
    }
}

server {

listen 80;

server_name www1.hoyo.idv.tw;

location / {

proxy_set_header Host $host;

proxy_pass http://172.17.0.2;

}

將需要啟動的網站連結到 sites-enabled

# ln -s /etc/nginx/sites-available/www1 /etc/nginx/sites-enabled/www1

1	# ln -s /etc/nginx/sites-available/www1 /etc/nginx/sites-enabled/www1

重新啟動 Nginx

# nginx -s reload

1	# nginx -s reload

—

使用 wkhtmltopdf 將 HTML 轉成 PDF

Posted on 2018-10-09 by hoyo

使用 wkhtmltopdf 相對 TCPDF 來說可大幅簡化 PDF 的轉換工作

—

CentOS 6 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos6.x86_64.rpm
# yum install -y libXext libXrender fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1
# rpm -Uvh wkhtmltox-0.12.5-1.centos6.x86_64.rpm

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos6.x86_64.rpm

# yum install -y libXext libXrender fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos6.x86_64.rpm

—

CentOS 7 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpm
# yum install -y fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1
# rpm -Uvh wkhtmltox-0.12.5-1.centos7.x86_64.rpm

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpm

# yum install -y fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos7.x86_64.rpm

—

安裝中文字型及顯示

Hoyo 發生的情況是因為要產生 PDF 的 HTML，所以沒有給完整的結構，因此就少了編碼宣告才發生亂碼

<meta http-equiv="content-type" content="text/html;charset=utf-8">

1	<meta http-equiv="content-type" content="text/html;charset=utf-8">

如果是系統沒有中文字型請參考以下步驟

# mkdir /usr/share/fonts/simsun
# cp simsun.ttc /usr/share/fonts/simsun/
# fc-cache -fv
# fc-list
SimSun,宋体:style=Regular

# mkdir /usr/share/fonts/simsun

# cp simsun.ttc /usr/share/fonts/simsun/

# fc-cache -fv

# fc-list

SimSun,宋体:style=Regular

—

開始使用

# wkhtmltopdf a.html a.pdf

1	# wkhtmltopdf a.html a.pdf

以下是一個實際案例，此為從 Word 設計後轉貼到網頁編輯器 TinyMCE 上，然後再經過 PHP 套版最後的結果

原來使用 TCPDF 的結果，因為 TCPDF 有中文避頭尾功能，所以整體編排結果和網頁顯示不一，如果花時間調整應該也可以得到滿意的結果，不過 Hoyo 就先放棄了

—

設定其他字型 (楷體、黑體)

安裝完字型後，使用 fc-list 指令列出安裝完成字型

# fc-list :lang=zh
楷体,KaiTi:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta
微软雅黑,Microsoft YaHei:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta
文泉驛正黑,WenQuanYi Zen Hei,文泉驿正黑:style=Regular
Microsoft YaHei Mono:style=Regular
教育部標準楷書,TW\-MOE\-Std\-Kai:style=Regular
文泉驛等寬正黑,WenQuanYi Zen Hei Mono,文泉驿等宽正黑:style=Regular
文泉驛點陣正黑,WenQuanYi Zen Hei Sharp,文泉驿点阵正黑:style=Regular

# fc-list :lang=zh

楷体,KaiTi:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

微软雅黑,Microsoft YaHei:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

文泉驛正黑,WenQuanYi Zen Hei,文泉驿正黑:style=Regular

Microsoft YaHei Mono:style=Regular

教育部標準楷書,TW\-MOE\-Std\-Kai:style=Regular

文泉驛等寬正黑,WenQuanYi Zen Hei Mono,文泉驿等宽正黑:style=Regular

文泉驛點陣正黑,WenQuanYi Zen Hei Sharp,文泉驿点阵正黑:style=Regular

將列出的首個關鍵字設定為 HTML 的字型名稱，例如楷體必須設定為「楷体」，不是網路上說的 KaiTi 也不是楷體，更不是標楷體

HTML

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
        *{
            font-family: "楷体", 'Microsoft YaHei', serif;
        }
    </style>
</head>
<body>

<html>

<head>

<style>

font-family: "楷体", 'Microsoft YaHei', serif;

}

</style>

</head>

<body>

—

頁首、頁尾及大綱

—

紙本版面排版問題

关于wkhtmltopdf，你一定想知道这些

<style>
    *{
        font-family: "Microsoft YaHei Mono", serif;
        font-size: 18px; 
        letter-spacing: 0; 
        white-space: pre; 
        word-wrap: break-word;
    }
</style>

<style>

font-family: "Microsoft YaHei Mono", serif;

font-size: 18px;

letter-spacing: 0;

white-space: pre;

word-wrap: break-word;

}

</style>

—

Vigor2920Vn 使用心得備註

Posted on 2018-09-09 by hoyo

—

Content Security Management (CSM) – URL Content Filter Profile

Hoyo 的結論

只支援 HTTP 網址，不支援 HTTPS
使用 Hex 過濾內容關鍵字方式還需要再測試，因為 Vigor 不支援，只能轉換成 URL encode ，初次嘗試失敗收場
雖然如此 Vigor2920 + iPad 的組合還是可以成功阻隔網頁及 APP 廣告

—

Vigor2920Vn 變成 Vigor2920V

Hoyo 的 2920Vn 除了要當作 WiFi AP 外還要負責 Server 的防火牆，前陣子開始 WiFi 當機，加散熱片加風扇以及設定半夜重新開機皆沒用，最近還會整台當機。

所以決定將無線網路模組拆除，如此 Vigor 2920Vn 就會覺得自己變成了 Vigor 2920V 了，管理介面的 WiFi 功能也會消失

驗明正身 Vigor2920Vn

移除無線網卡

後台介面顯示 Modal

—

華為 P9+ 安兔兔跑分

Posted on 2018-08-20 by hoyo

安兔兔跑分

CPU : 43878
GPU : 15359
UX : 25461
MEM: 7840

—

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Author Archives: hoyo

Video.js – 基本播放以及字幕

水平居中、高度固定的播放器

字幕

自訂字幕格式

FFmpeg 將字幕檔和影片合併

FFmpeg 將影片合併字幕檔

ass 字幕

Docker – 網址轉 Port

Nginx container

子 HTTP Service container

子 WWW 啟動

使用 Nginx 將多 container WWW 服務轉到網址

使用 wkhtmltopdf 將 HTML 轉成 PDF

CentOS 6 安裝

CentOS 7 安裝

安裝中文字型及顯示

開始使用

設定其他字型 (楷體、黑體)

頁首、頁尾及大綱

紙本版面排版問題

Vigor2920Vn 使用心得備註

Content Security Management (CSM) – URL Content Filter Profile

Vigor2920Vn 變成 Vigor2920V

華為 P9+ 安兔兔跑分

安兔兔跑分