動画配信サーバー設定

CentOS7

動画配信サーバー設定†

↑

動画をHLS形式に変換†

変換元動画をWinSCPで動画格納先へ格納する。

[root@centos ~]# cd /usr/local/nginx/html/vod　←　動画格納先ディレクトリへ移動

[root@centos ~]# sh /root/convert_to_hls.sh 変換元動画ファイル名　←　HLS形式動画変換

convert completed. => xxxxxxxx.m3u8 　←　動画変換成功

[root@centos ~]# cd　←　動画格納先ディレクトリを抜ける

↑

動画視聴用ページ作成†

[root@centos ~]# vi /usr/local/nginx/html/vod.html　←　動画視聴用ページ作成

<!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>

↑