播放FLV/RTMP視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="videoJs.css">
<script type="text/javascript" src='video.js'></script>
<script type="text/javascript">
videojs.options.flash.swf = "videoJs.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" data-setup='{"autoplay":true}'>
<!-- <source src="wukong.flv" type='video/x-flv' /> -->
<!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type='rtmp/flv' /> -->
</video>
</body>
</html>播放HLS視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PC HLS video</title>
<link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">
</head>
<body>
<h1>PC 端播放 HLS(<code>.m3u8</code>) 視頻</h1>
<p>藉助 video.js 和 videojs-contrib-hls</p>
<p>由於 videojs-contrib-hls 需要通過 XHR 來獲取解析 m3u8 文件, 因此會遭遇跨域問題, 請設置瀏覽器運行跨域</p>
<!-- <video id="hls-video" width="300" height="200" class="video-js vjs-default-skin" -->
<video id="hls-video" width="600%" height="390%" class="video-js vjs-default-skin"
playsinline webkit-playsinline
autoplay controls preload="auto"
x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
<!-- 直播的視頻源 -->
<!-- <source src="http://live.zzbtv.com:80/live/live123/800K/tzwj_video.m3u8" type="application/x-mpegURL"> -->
<source src="http://pili-live-hdl.wlaa.com.cn/jinglindemo/android_test.flv?sign=ce8fb1bbc036acbf06086db618318dc8&t=5a4346ca" type="application/x-mpegURL">
<!-- lol直播 -->
<!-- <source src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8" type="application/x-mpegURL"> -->
<!-- <source src="http://pili-live-hls.wlaa.com.cn/jinglindemo/android_test.m3u8?sign=0959c026c9ae5b46cfb90c4acde7b35e&t=5a41bba7" type="application/x-mpegURL"> -->
<!-- <source src="http://pili-live-hls.wlaa.com.cn/jinglindemo/aa1.m3u8" type="application/x-mpegURL"> -->
<!-- 點播的視頻源 -->
<!-- <source src="http://devstreaming.apple.com/videos/wwdc/2015/413eflf3lrh1tyo/413/hls_vod_mvp.m3u8" type="application/x-mpegURL"> -->
</video>
<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<!-- PC 端瀏覽器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 來給我們解碼 -->
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
<script>
// XMLHttpRequest cannot load http://xxx/video.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.198.98:8000' is therefore not allowed access.
// 由於 videojs-contrib-hls 需要通過 XHR 來獲取解析 m3u8 文件, 因此會遭遇跨域問題, 請設置瀏覽器運行跨域
var player = videojs('hls-video');
player.play();
</script>
</body>
</html>