#author("2020-10-09T22:08:51+09:00","default:egashira","egashira") #author("2020-10-09T22:09:09+09:00","default:egashira","egashira") [[CentOS7]] *動画配信サーバー設定 [#n84e66a2] **動画をHLS形式に変換 [#zc646bcf] 変換元動画をWinSCPで動画格納先へ格納する。 |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# cd /usr/local/nginx/html/vod &color(lime){← 動画格納先ディレクトリへ移動};| |[root@centos ~]# sh /root/convert_to_hls.sh &color(lime){ 変換元動画ファイル名 ← HLS形式動画変換};| |convert completed. => xxxxxxxx.m3u8 &color(lime){ ← 動画変換成功};| |[root@centos ~]# cd &color(lime){← 動画格納先ディレクトリを抜ける};| **動画視聴用ページ作成 [#xea584ee] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# vi /usr/local/nginx/html/vod.html &color(lime){← 動画視聴用ページ作成};| <!DOCTYPE html> <html lang="en" class=""> <head> <title>ONDEMAND</title> <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet"> <script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> </head> <body> <video id="video" class="video-js vjs-default-skin" width="640" height="480" controls> <script type="text/javascript"> var source = '/vod/動画ファイル名.m3u8'; var ua = navigator.userAgent; if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { // iOS document.write('<source src=' + source + ' type="application/x-mpegURL">'); document.write('</video>'); }else{ // OTHER document.write('</video>'); if(Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); hls.loadSource(source); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } } </script> </body> </html> **認証用ユーザー名/パスワード登録 [#s50418bb] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# mkdir /usr/local/nginx/passwd/ &color(lime){← ユーザー名/パスワードファイル作成先ディレクトリ作成 };| |[root@centos ~]# mkdir /usr/local/nginx/passwd/ &color(lime){← ユーザー名/パスワードファイル作成先ディレクトリ作成};| |[root@centos ~]# yum -y install httpd-tools &color(lime){← httpd-toolsインストール};| |[root@centos ~]# htpasswd -b -c -m /usr/local/nginx/passwd/.htpasswd &color(lime){ユーザー名 パスワード ← ユーザー名/パスワード登録};| |Adding password for user xxxxxxxx|