Sewise M3U8 src方式嵌入播放

lyshfire · Sep 27, 2016 · 4e486e4 · 4e486e4
1 parent 9234d91
commit 4e486e4
Show file tree

Hide file tree

Showing 106 changed files with 4,858 additions and 1 deletion.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/Backend/Home/View/Common/sidebar.html b/Backend/Home/View/Common/sidebar.html
@@ -73,6 +73,12 @@
                         <b class="arrow icon-angle-down"></b>
                     </a>
                     <ul class="submenu">
+                        <li>
+                            <a href="__APP__/Html5/Sewise/index">
+                                <i class="icon-desktop"></i>
+                                Sewise Player
+                            </a>
+                        </li>
                         <li>
                             <a href="__APP__/Html5/Video/VideoTest">
                                 <i class="icon-desktop"></i>

diff --git a/Backend/Html5/Controller/IndexController.class.php b/Backend/Html5/Controller/IndexController.class.php
@@ -10,4 +10,9 @@ public function test()
         echo 'Html5';
     }
 
+    public function setTimeOut()
+    {
+        $this->display();
+    }
+
 }
diff --git a/Backend/Html5/Controller/SewiseController.class.php b/Backend/Html5/Controller/SewiseController.class.php
@@ -0,0 +1,57 @@
+<?php
+namespace Html5\Controller;
+
+use Think\Controller;
+
+class SewiseController extends Controller
+{
+    public function index()
+    {
+        $this->display();
+    }
+
+    /**
+     * 点播MP4视频播放
+     */
+    public function videoMp4()
+    {
+        $this->display();
+    }
+
+    /**
+     * M3U8 src方式嵌入播放，这个可以切换地址播放哦
+     */
+    public function liveM3u8()
+    {
+        $this->display();
+    }
+
+    /**
+     *  M3U8验证地址播放,URL是一个字符串哦
+     */
+    public function requestM3u8()
+    {
+        $this->display();
+    }
+
+    /**
+     *  直播RTMP流播放
+     */
+    public function rtmpStreamUrl()
+    {
+        $this->display();
+    }
+
+    /**
+     *  mp3 音频播放
+     */
+    public function audio()
+    {
+        $this->display();
+    }
+
+
+
+
+
+}
diff --git a/Backend/Html5/View/Index/settimeout.html b/Backend/Html5/View/Index/settimeout.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>setInterval和setTimeout的使用区别</title>
+    <!-- Chang URLs to wherever Video.js files will be hosted -->
+    <link href="__PUBLIC__/Backend/video/video-js.css" rel="stylesheet" type="text/css" />
+    <!-- video.js must be in the <head> for older IEs to work. -->
+    <script src="__PUBLIC__/Backend/video/video.js"></script>
+
+    <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
+    <script>
+        videojs.options.flash.swf = "__PUBLIC__/video/video-js.swf";
+    </script>
+
+
+</head>
+<body>
+setTimeOut
+<div id="info">
+    <h3>欢迎光临</h3>
+    <p>我的qq是332877552</p>
+</div>
+
+<!--设置自动播放将下面代码加到html中代码后面-->
+<script type="text/javascript">
+    var intervalProcess  = setInterval("showTime2()", 1000);
+    function showTime2()
+    {
+        var today = new Date();
+        console.log("The time is: " + today.toString());
+        console.warn("timer ID: " + intervalProcess);
+    }
+    console.log('打印信息');
+//    /*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
+//    function add(a,b){
+//        console.trace();
+//        return a+b;
+//    }
+//    var x = add3(1,1);
+//    function add3(a,b){return add2(a,b);}
+//    function add2(a,b){return add1(a,b);}
+//    function add1(a,b){return add(a,b);}
+//    console.log("%d年%d月%d日",2011,1,26);
+//
+//    var result = 1;
+//    console.assert( result );
+//    var year = 2014;
+//    console.assert(year == 2018 );
+
+    //    console.info('信息');
+//    console.warn('警告');
+//    console.error('错误');
+//    console.trace();
+
+//    console.group('第一个分组');
+//        console.log('第一条');
+//        console.log('第二条');
+//    console.groupEnd();
+//
+//    console.group('第二个分组');
+//            console.log('第一条');
+//            console.log('第二条');
+//    console.groupEnd();
+
+</script>
+</body>
+</html>
diff --git a/Backend/Html5/View/Sewise/audio.html b/Backend/Html5/View/Sewise/audio.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+	<title>mp3 音频播放</title>
+
+</head>
+<body>
+<div style="width: 640px; height: 352px; ">
+	<script type="text/javascript" src="http://jackzhang1204.github.io/sewise/sewise_player/player/sewise.player.min.js"></script>
+	<script type="text/javascript">
+		SewisePlayer.setup({
+			server: "vod",
+			type: "mp3",
+			//skin: "vodWhite", 	和video一样支持皮肤的噢 :-)
+			videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
+			fallbackurls:{
+				ogg: "http://www.w3schools.com/html/horse.ogg"
+			}
+		});
+	</script>
+</div>
+
+<div style="padding: 20px;float: left;">注：如果当前平台为PC，播放器将启用Flash播放m3u8文件。如果当前平台为Mobile，播放器将启用HTML5播放m3u8文件。</div>
+</body>
+</html>
diff --git a/Backend/Html5/View/Sewise/index.html b/Backend/Html5/View/Sewise/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>HTML5 Sewise演示地址</title>
+
+    <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
+    <script>
+        videojs.options.flash.swf = "__PUBLIC__/video/video-js.swf";
+    </script>
+
+</head>
+<body>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/videoMp4">点播MP4视频播放</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/liveM3u8">M3U8 src方式嵌入播放，这个可以切换地址播放哦</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/requestM3u8">M3U8验证地址播放</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/rtmpStreamUrl">直播RTMP流播放</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/audio">mp3 音频播放</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/videoMp4">点播MP4视频播放</a><p>
+<a target="_blank" href="http://127.0.0.1/ThinkPhpStudy/admin.php/Html5/Sewise/videoMp4">点播MP4视频播放</a><p>
+<!--设置自动播放将下面代码加到html中代码后面-->
+<script type="text/javascript">
+    var myPlayer = videojs('example_video_1');
+    videojs("example_video_1").ready(function(){
+        var myPlayer = this;
+//        myPlayer.play();
+    });
+</script>
+</body>
+</html>
diff --git a/Backend/Html5/View/Sewise/requestm3u8.html b/Backend/Html5/View/Sewise/requestm3u8.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+	<title>Sewise M3U8 src方式嵌入播放</title>
+	<style type="text/css">
+		body{
+			margin: 0px;
+			padding: 0px;
+		}
+	</style>
+
+</head>
+<body>
+<div style="width: 640px; height: 352px; ">
+	<script type="text/javascript" src="http://jackzhang1204.github.io/sewise/sewise_player/player/sewise.player.min.js"></script>
+	<script type="text/javascript">
+		SewisePlayer.setup({
+			server: "vod",
+			type: "m3u8",
+			autostart: "true",
+//			videourl: "http://g3.letv.cn/vod/v2/NzQvMzEvNTIvbGV0di11dHMvMTQvdmVyXzAwXzE2LTI2ODY4MjI5LWF2Yy0yMjk1OTQtYWFjLTMyMDAxLTY5Njg3NTMtMjM2MTYwMjg3LTIzZWM2YTJjNGVjZmNjNTYzZWJmYzFmMmQ1MjcwZTRmLTE0MDc3ODUzMzEwMzYubXA0?b=271&mmsid=2181963&tm=1415858824&key=ee1f384d73f341e23289643a14cd3610&platid=3&splatid=304&playid=0&tss=ios&vtype=21&cvid=964198564846&retry=1",
+//			videourl: "http://pl.youku.com/playlist/m3u8?ts=1413447142&keyframe=1&ykss=a6ec3d54e76f345821be8ae7&vid=XMzM3MzIwNTI0&type=flv&sid=6413447142906212bad07&token=6701&oip=1944544396&ep=W3QaazLJ6MJjY0RQ87mH5t3ffCVpllWMsoRGJNyNP6EPUnfLuNmZc6IQ9vkzJWPC&did=3f2189e6a744e68de6761a20ceaf379aa8acfad4&ctype=21&ev=1",
+			videourl: "http://cdn1.amailive.com/hls/002.m3u8",
+			skin: "vodWhite",
+			title: "request m3u8 path",
+			claritybutton: "disable",
+			lang: "zh_CN"
+		});
+	</script>
+</div>
+
+<div style="padding: 20px;float: left;">注：如果当前平台为PC，播放器将启用Flash播放m3u8文件。如果当前平台为Mobile，播放器将启用HTML5播放m3u8文件。</div>
+</body>
+</html>
diff --git a/Backend/Html5/View/Sewise/rtmpstreamurl.html b/Backend/Html5/View/Sewise/rtmpstreamurl.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+	<title>直播RTMP流播放</title>
+	<style type="text/css">
+		body{
+			margin: 0px;
+			padding: 0px;
+		}
+	</style>
+
+</head>
+<body>
+<div style="width: 640px; height: 352px; ">
+	<script type="text/javascript" src="http://jackzhang1204.github.io/sewise/sewise_player/player/sewise.player.min.js"></script>
+	<div style="width: 640px; height: 480px; ">
+		<script type="text/javascript" src="../player/sewise.player.min.js?server=live&type=rtmp&streamurl=rtmp://120.26.206.180/live/123456&autostart=true&buffer=5&lang=zh_CN&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&poster=http://jackzhang1204.github.io/materials/poster.png&title=LiveVideo&skin=liveWhite"></script>
+	</div>
+	<div style="float: left; width: 100%; padding: 10px 30px; "><a href="https://github.com/jackzhang1204/sewise-player" target="_blank">Fork it on GitHub</a></div>
+</div>
+
+<div style="padding: 20px;float: left;">注：如果当前平台为PC，播放器将启用Flash播放m3u8文件。如果当前平台为Mobile，播放器将启用HTML5播放m3u8文件。</div>
+</body>
+</html>