一个简单的HLS视频播放例子，使用了MediaElement.js。
miniflycn / hls-demo Goto Github PK
View Code? Open in Web Editor NEW一个简单的HLS视频播放例子
hls-demo's Introduction
hls-demo's People
Contributors
Stargazers
Watchers
Forkers
lzhwweb liujuan4717 yq786328180 kongx73 edbea jillygacai kmcfly maxoi 2php fancygit trampor zhaog lansandeyuji farukonfly apple0407 smj227227 yisonzhang fpg100 taosiyu silasxue q315099997 nsblacker liwmj hao707822882 mrliulinjie luofeihu cucygh cnspica zyggit szwork2013 xiaobailong940 yangtairen xyzonline fzylx vincentlao syuukawa chenrui2014 senwa hsay feelingoo lc343 lynnprosper stantoxt a382695908 zy5651768 zhc8844096 shuyunqi catroo 418727416 colinrds mcyfeng jiangyunhua jaczhoulang songyandong kuangjg easyvalley sjaigit zongzmz waffcloud ko-reihls-demo's Issues
为什么全屏后画面还是保持原大小。
http://cms.yuanyanggold.com/home/Test/test
上面是测试页面。
ps：用了很多方法，文档上的defaultVideoWidth，只能设置初始大小，stretching属性好像不支持，应该是新增的属性，看了下源码好像只有初始大小及flash播放器大小的设置，也可能没找到，(⊙ө⊙)困扰了几天了。
pps（难道是直播源的问题,我在本地播放m3u8文件是可以全屏的）
HLS视频点播&直播初探
前端可选的视频直播协议大致只有两种：
- RTMP（Real Time Messaging Protocol）
- HLS（HTTP Live Streaming）
其中
RTMP是Adobe开发的协议，无法在iPhone中兼容，故目前兼容最好的就是HLS协议了。
HTTP Live Streaming（HLS）是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。所以，HLS比RTMP有较高的延迟。
前端播放HLS
- Native支持
- Android 3.0+
- iOS 3.0+
- flash支持
- Flowplayer（GPL
×） - GrindPlayer（MIT）
- video-js-swf（Apache License 2.0）
- MediaElement.js（MIT）
- clappr（BSD IE10+
×）
- Flowplayer（GPL
最后，由于MediaElement已经纳入WordPress的核心视音频库，以及其良好的兼容性（见下图），所以最后选择使用MediaElement.js来实现。
切片准备
可使用m3u8downloader下载一个HLS源，或者使用node-m3u生成m3u8索引和MPEG-TS切片，下面是我们准备切片：
注意看切片索引文件：
#EXTM3U
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.133333,
fileSequence0.ts
#EXTINF:10.000666,
fileSequence1.ts
#EXTINF:10.667334,
fileSequence2.ts
#EXTINF:9.686001,
fileSequence3.ts
#EXTINF:9.768665,
fileSequence4.ts
#EXTINF:10.000000,
fileSequence5.ts
#EXT-X-ENDLIST
其中#EXT-X-ENDLIST为切片终止标记，如果没有该标记，浏览器会在文件读取完后再请求索引文件，如果有更新则继续下载新文件，以此达到直播效果。
前端代码
<!DOCTYPE html>
<html>
<head>
<title>player</title>
<link rel="stylesheet" href="./player/mediaelementplayer.css" />
<style>
/** 隐藏控制条 **/
.mejs-controls {
display: none !important;
}
</style>
</head>
<body>
<video width="640" height="360" id="player1">
<source type="application/x-mpegURL" src="/m3u8/index.m3u8">
</video>
<script src="http://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
<script src="./player/mediaelement-and-player.js"></script>
<script>
var player = new MediaElementPlayer('#player1', {
// 禁止点击暂停
clickToPlayPause: false,
success: function (media, ele, player) {
// 初始化后立刻播放
player.play();
}
});
</script>
</body>
</html>
效果
例子源码
用firefox没运行成功，有没有人运行成功？
就这么一个画面，没有了，点击download File的话就是空的了
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.