参考链接:

https://www.cnblogs.com/afrog/p/6689179.html

VideoJS的CSS样式，这里我提供一下BootCdn的链接

cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css

VideoJS的JS脚本，同上提供BootCdn的链接

cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js

index.html 代码

<head>

  <link href="//vjs.zencdn.net/7.0.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->

  <script src="//vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

</head>

<body>

<BR>

<div class="videoplayer">

<div align=center>

  <video id="my-video" class="video-js" controls preload="none" width="" height=""

  poster="Logo.jpg" data-setup='{ "aspectRatio":"640:267","autoplay": true, "loop": "true","playbackRates": [1, 1.5, 2] }'>

    <source src="http://192.168.1.80/hls/video.m3u8" type='application/x-mpegURL'>

<!--     <source src="MY_VIDEO.webm" type='video/webm'> -->

    <p class="vjs-no-js">

      To view this video please enable JavaScript, and consider upgrading to a web browser that

      <a href="//videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

    </p>

  </video>

  <script src="//vjs.zencdn.net/7.0.0/video.js"></script>

</div>

<center>

<div class="logo">

<img src="Logo1.png" style="width:25%;">

<img src="Logo2.png" style="width:50%;">

</div>

</body>

nginx 的配置如下

    server {

        listen ;

        index index.html;

        root /usr/local/nginx/html/;

        autoindex on;

        location /hls {

            alias /usr/local/nginx/html/hls/;

            types {

                application/vnd.apple.mpegurl m3u8;

                video/mp2t ts;

            }

            add_header Cache-Control no-cache;

            add_header Access-Control-Allow-Origin *;

        }

    }

video.js 后端网页播放器的更多相关文章

  1. 最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）

    http://blog.csdn.net/leixiaohua1020/article/details/43936415 ======================================= ...

  2. 推荐下：开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

    视频播放, 原本是想h5 自带视频播放,使用很简单,结果现实很骨感. <video controls="controls" preload="auto" ...

  3. .net C# 网页播放器 支持多种格式 媒体播放器 播放器 代码

    .avi格式代码片断如下:<object id='video' width='400' height='200' border='0' classid='clsid:CFCDAA03-8BE4- ...

  4. （转载）开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

    文章链接:http://justcoding.iteye.com/blog/2110275 CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的 ...

  5. 全平台网页播放器兼容H5与Flash还带播放列表

    许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...

  6. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  7. 开源ckplayer 网页播放器去logo去广告去水印修改

    功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...

  8. 使用Window Media Player网页播放器

    近段时间在做一个IETM的项目,项目需要使用WebBrower对包含avi的xml进行显示,可avi的显示总是有问题,网上找到这段在html中播放avi的代码,在Win10上表现不错,明天上班用Win ...

  9. 网页播放器（jsp、js）

    jsp对控件显示 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

随机推荐

  1. css基础-盒子模型+背景和列表

    border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...

  2. honeywell1900扫描枪的使用说明

    霍尼韦尔1900扫描枪驱动是honeywell1900扫描枪的USB驱动,就是扫描枪usb转com,如果你的系统是32位的,就直接运行Install_x86.bat,如果是64位的,就运行Instal ...

  3. beego的请求数据处理

    我们经常需要获取用户传递的数据,包括 Get.POST 等方式的请求,beego 里面会自动解析这些数据,你可以通过如下方式获取数据: GetString(key string) string Get ...

  4. 安装TensorFlow失败

    ERROR: Could not find a version that satisfies the requirement tensorflow==2.1.0 (from versions: non ...

  5. Java-跳跃路线

    题目: 小明参加了学校的趣味运动会,其中的一个项目是:跳格子.地上画着一些格子,每个格子里写一个字,如下所示: 从我做起振我做起振兴做起振兴中起振兴中华 比赛时,先站在左上角的写着“从”字的格子里,可 ...

  6. 使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理

    本章将和大家简单分享下如何使用VS中自带的一键打包功能将我们的ASP.NET Core类库打包并将程序包(类库)发布到NuGet平台上进行管理. 一.注册并登录NuGet平台 NuGet官网:http ...

  7. C# IO流与文件读写学习笔记

    本笔记摘抄自:https://www.cnblogs.com/liyangLife/p/4797583.html,记录一下学习过程以备后续查用. 一.文件系统 1.1文件系统类的介绍 文件操作类大都在 ...

  8. vs2015运行时提示未加载vcruntime140.adm64.pb

    后调试查看发现 vs2015运行时提示未加载vcruntime140.adm64.pb 解决方案:去微软官网下载安装 vc_redist.exe ,安装就可以了.有64位版和32位版,根据计算机配置进 ...

  9. 预防XSs和sql注入常见分析

    SQL注入简介SQL 注入漏洞(SQL Injection)是 Web 开发中最常见的一种安全漏洞.可以用它来从数据库获取敏感信息,或者利用数据库的特性执行添加用户,导出文件等一系列恶意操作,甚至有可 ...

  10. 跨站请求伪造(Cross-site request forgery)， 简称为 XSRF

    跨站请求伪造(Cross-site request forgery), 简称为 XSRF,是 Web 应用中常见的一个安全问题.前面的链接也详细讲述了 XSRF 攻击的实现方式. 当前防范 XSRF ...