preface
Because the VIDEO in HTML does not support RTMP protocol now (need to rewrite the player framework, Flash is cut, 360 browser is still supporting Flash), then use RTMP as a bridge, actually HLS protocol plays a role in HTML. Ckplayer is simply, write a page, always loop, dream it possible brainwashing magic song.
Setup the Nginx server
Environment to prepare
1. Download environment
Nginx package :nginx package RTMP module package: nginx-HTTP-flV-module module package
2. The dependencies
yum -y install unzip yum -y install gcc-c++ yum -y install pcre pcre-devel yum -y install zlib zlib-devel yum -y install openssl openssl-develCopy the code3. The installation
Create an nginx path
mkdir /usr/local/nginx
Copy the codeCopy the downloaded module package to the nginx directory and unzip it
Zip /usr/local/nginx/nginx-http-flv-module CD /usr/local/nginx unzip nginx-http-flv-moduleCopy the codeInstall the Nginx server
Tar -zxvf nginx-1.8.1.tar.gz CD nginx-1.8.1. /configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx/nginx-http-flv-module make && make installCopy the codeNginx server configuration file
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
rtmp {
server {
allow publish all;
listen 1935;
ping 30s;
notify_method get;
application myapp {
live on;
# sample play/publish handlers
#on_play http://localhost:8080/on_play;
#on_publish http://localhost:8080/on_publish;
# sample recorder
#recorder rec1 {
# record all;
# record_interval 30s;
# record_path /tmp;
# record_unique on;
#}
# sample HLS
hls on;
hls_path /tmp/hls;
# hls_sync 100ms;
hls_fragment 5s;
hls_cleanup off;
record all;
record_path /tmp/record;
record_unique on;
}
# Video on demand
application vod {
# play /var/Videos;
play /usr/local/video;
}
# Video on demand over HTTP
#application vod_http {
# play http://localhost:8080/vod/;
#}
}
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# location / {
#root /tmp/hls;
#
#}
#The HLS configuration starts so that the 'client' can get the HLS pull flow over HTTP
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
index index.html index.htm;
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp/hls;
add_header Cache-Control no-cache;
}
#The HLS configuration is complete
# rtmp statlocation /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { # you can move stat.xsl to a different location # root /usr/build/nginx-rtmp-module; Root/usr/local/SRC/nginx RTMP - module - 1.2.1; } # rtmp control
location /control {
rtmp_control all;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#error_page 500 502 503 504 /50x.html;location = /50x.html { root html; }} # another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#listen 8000;
#listen somename:8080;
# server_name somename alias another.alias;
# location / {
#root html;
#index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
#listen 443 ssl;
#server_name localhost;
#ssl_certificate cert.pem;
#ssl_certificate_key cert.key;
#ssl_session_cache shared:SSL:1m;
#ssl_session_timeout 5m;
#ssl_ciphers HIGH:! aNULL:! MD5;
#ssl_prefer_server_ciphers on;
# location / {
#root html;
#index index.html index.htm;
# }
#}
}
Copy the code4. Push ffmpeg yards
Download the FFMPEG module package: FFMPEG
Query equipment
ffmpeg -list_devices true -f dshow -i dummy
Copy the code
Test video equipment available
ffplay -f dshow -i video="BisonCam, NB Pro"
Copy the codeffmpeg -f dshow -i video="BisonCam, NB Pro" -vcodec libx264 -vf scale=320:240 -preset:v ultrafast -tune:v zerolatency -f flv RTMP ://[IP address]/[your application, my application write [myapp]]myapp/[file name]wechatCopy the codeCross-domain issues (adding cross-domain to Nginx)
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
Copy the code5. Access in HTML.
<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>The front end plays m3U8 video</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
type="text/javascript"></script>
<! Contrib-hls: contrib-hls: contrib-hls: contrib-hls: contrib-hls: contrib-hls: contrib-hls: contrib-hls: contrib-hls
</head>
<body>
<style>
.video-js .vjs-tech {
position: relative ! important;
}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' style='width: 100%; height: auto'>
<source id="source"
src=http://[your IP address]/[your file name]wechat. M3u8"
type="application/x-mpegURL">
</source>
</video>
</div>
<div class="qiehuan"
style="width:100px; height: 100px; background: red; margin:0 auto; line-height: 100px; color:#fff; text-align: center">Switch the video</div>
</body>
<script>
// Videojs is easy to use
var myVideo = videojs('myVideo', {
bigPlayButton: true.textTrackDisplay: false.posterImage: false.errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { // Check whether the video source is in M3U8 format
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' // We need to give the new type value when adding the video source again})}else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://[your IP address]/[your file name].m3u8';
document.querySelector('.qiehuan').addEventListener('click'.function () {
changeVideo(src);
})
</script>
Copy the code