移动端Html5支持Hls格式视频播放，创建一个新的文件命名为VideoPlayerDemo-Html5.html打开

该文件写入如下内容，保存文件将该文件放到移动端（例如Android手机）直接打开可观看视频，

如图1所示。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>HTML5播放视频</title>

</head>

<body>

<video width="" height="" controls>

  <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/vnd.apple.mpegurl">

  浏览器不支持 video 标签。

</video>

</body>

</html

图1Html5 播放Hls效果图

交流群号为1038388075，766718184 ，博主提供Ffmpeg、GB28181视频教程 播放地址： http://www.iqiyi.com/u/1426749687

视频下载地址：http://www.chungen90.com/?news_3/

Html5 播放Hls格式视频的更多相关文章

  1. vue 使用vue-video-player播放hls格式视频

    安装 vue-video-player   在 “ devDependencies ” 中 安装  videojs-contrib-hls 在“ dependencies ”中   main.js 中 ...

  2. 前端播放m3u8格式视频

    一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...

  3. opencv实例三：播放AVI格式视频

    一.不带滚动条的视频读取播放. 1.原理介绍:视频的本质是一些静态的图像的集合,opencv可以不断读取视屏中的图片,显示,就可以实时的视频流进行处理了. 2.代码如下: /************* ...

  4. Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型

    转自原文 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 播放mp4格式的时候提示 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 原因是在IIS中 ...

  5. 在vue项目中播放m3u8格式视频

    前言:最近公司在做一个线上会议的项目,要求后台网站播放m3u8格式的视频,查找部分资料,总结一下,方便后边查阅 1.在vue工程中安装以下依赖: cnpm install  video.js --sa ...

  6. 百度播放器SDK 播放MP4格式视频有声音无画面问题解决

    此处为记录解决过程. 所链接使用的MP4格式视频为codec id是mp4v-20.使用手机自带播放器可以播放,使用百度云媒体播放器不能无画面.经调试,Android Baidu-Cloud-Play ...

  7. C#用ckplayer.js播放 MP4格式视频实现 边加载边播放

    MVC设计模式下 在View页面里面使用ckplayer.js 加载视频 ,在MP4格式视频上传之后 我发现某些视频可以边加载边播放 但是有一些又不行,找了下原因是因为视频的元数据信息在第一帧的时候就 ...

  8. html5 播放多个视频。一个接一个的播放

    new个video,指定播放列表的第一个视频路径为src.监听end事件,回调里面把video的src改成列表的下一个,再play. 示意代码:var vList = ['视频地址url1', 'ur ...

  9. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

随机推荐

  1. windows服务-监视文件

    配置一个xml其中有是否开启监视.监视时间.监视路径. FileSystemWatcher watcherName = new FileSystemWatcher(); watcherName.Inc ...

  2. CSS3 基本属性 浅析（含选择器、背景阴影、3D转换、动画等）

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  3. idea如何设置类头注释和方法注释(带注释模板)

    1.idea类注释 打开:file->setting->Editor->Filr and Code Templates->Includes->File Header 类注 ...

  4. [网络流24题] COGS 搭配飞行员

    14. [网络流24题] 搭配飞行员 ★★☆   输入文件:flyer.in   输出文件:flyer.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     飞行大队 ...

  5. POJ 2168 Popular cows [Tarjan 缩点]

                                                                                                         ...

  6. .NET中如何有效的使用Cache

    原文发布时间为:2009-09-30 -- 来源于本人的百度文章 [由搬家工具导入] 　　Cache 即高速缓存 ，我想很多人对他的第一印象一定像我一样，感觉他一定能提高系统得性能和运行速度。 　　C ...

  7. 图表插件echars的使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  8. Method, apparatus, and system for speculative abort control mechanisms

    An apparatus and method is described herein for providing robust speculative code section abort cont ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---35

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. SQL存储过程基础

    什么是存储过程呢?存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令. 通俗来讲:存储过程其实就是能完成一定操作的一组SQL语句. 那为什么要用存储过程呢?1.存储过程只在创造时进行编译, ...