[update] add iframe demo

Chimeejs · Apr 25, 2018 · 9b1e080 · 9b1e080
1 parent a8e2a2e
commit 9b1e080
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 1 deletion.
diff --git a/demo/iframe/iframe.html b/demo/iframe/iframe.html
@@ -0,0 +1,19 @@
+<!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>iframe</title>
+  <style>
+    iframe {
+      width: 80%;
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+  This is an iframe.
+  <iframe src="./index.html"></iframe>
+</body>
+</html>
diff --git a/demo/iframe/index.css b/demo/iframe/index.css
@@ -0,0 +1,61 @@
+html, body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+html {
+  background-color: #FFFBE6;
+  font-family: "Oswald", "HelveticaNeue-CondensedBold", "Arial Narrow", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",  sans-serif;
+  background-repeat: no-repeat;
+  min-height: 100%;
+}
+body {
+  padding: 10px;
+  box-sizing: border-box;
+  color: #36384A;
+  max-width: 800px;
+  margin: auto;
+}
+#wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+container {
+  position: relative;
+  display: block;
+  /* width: 100%;
+  height: 100%; */
+}
+video {
+  /* width: 100%;
+  height: 100%; */
+  display: block;
+  background-color: #000;
+}
+video:focus,
+video:active {
+  outline: none;
+}
+button {
+  color: #fff;
+  background-color: #3F4F68;
+  padding: 6px 12px;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 4px;
+  text-transform: none;
+  outline: none;
+  border: none;
+  margin-bottom: 2px;
+}
+h1 {
+  color: #9D295A;
+}
+button:active {
+  background-color: #36384A;
+}
+
diff --git a/demo/iframe/index.html b/demo/iframe/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simplest Demo</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Chimee Player Demo">
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" type="text/css" href="./index.css">
+</head>
+<body>
+    <header>
+        <h1>Simplest Demo</h1>
+        <p>The simplest demo for Chimee with only one button</p>
+    </header>
+    <section id="wrapper"></section>
+</body>
+<script type="text/javascript" src="/lib/index.dev.js"></script>
+<script type="text/javascript" src="/node_modules/chimee-kernel-flv/lib/index.js"></script>
+<script type="text/javascript" src="/node_modules/chimee-kernel-hls/lib/index.browser.js"></script>
+<!--<script type="text/javascript" src="/lib/player.umd.js"></script>-->
+<script type="text/javascript" src="./index.js"></script>
+</html>
diff --git a/demo/iframe/index.js b/demo/iframe/index.js
@@ -0,0 +1,90 @@
+const Chimee = window.Chimee;
+const plugin = {
+  // 插件名为 controller
+  name: 'controller',
+  // 插件实体为按钮
+  el: '<button>play</button>',
+  data: {
+    text: 'play',
+  },
+  methods: {
+    changeVideoStatus() {
+      this[this.text]();
+    },
+    changeButtonText(text) {
+      this.text = text;
+      this.$dom.innerText = this.text;
+    },
+  },
+  // 在插件创建的阶段，我们为插件绑定事件。
+  create() {
+    this.$dom.addEventListener('click', this.changeVideoStatus);
+    this.$watch('controls', function(newVal, oldVal) {
+      console.log(newVal, oldVal);
+    }, { diff: false });
+    console.log(this.$plugins);
+  },
+  // 插件会在播放暂停操作发生后改变自己的文案及相应的行为
+  events: {
+    pause() {
+      this.changeButtonText('play');
+    },
+    play() {
+      this.changeButtonText('pause');
+    },
+    c_contextmenu(evt) {
+      console.log(evt);
+    },
+    c_click(evt) {
+      console.warn(evt);
+    },
+    after_c_click(evt) {
+      console.log(evt, 'after_c');
+    },
+    click(evt) {
+      console.log(evt);
+    },
+  },
+};
+Chimee.install(plugin);
+const fullscreenPlugin = {
+  // 插件名为 controller
+  name: 'fullscreenplugin',
+  // 插件实体为按钮
+  el: '<button>fullscreen</button>',
+  // 在插件创建的阶段，我们为插件绑定事件。
+  create() {
+    this.$dom.addEventListener('click', () => {
+      this.fullscreen(!this.isFullscreen);
+    });
+  },
+  inner: true,
+};
+Chimee.install(fullscreenPlugin);
+const player = new Chimee({
+  // 播放地址
+  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
+  // src: 'http://cdn.toxicjohann.com/%E4%BA%8E%E6%98%AF.mp4',
+  // src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
+  // src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/79_3041054cc65-ae8c-4b63-8937-5ccb05f79720.m3u8',
+  // dom容器
+  wrapper: '#wrapper',
+  plugin: [{
+    name: 'controller',
+    inner: false,
+  }, 'fullscreenplugin' ],
+  // preset: {
+  //   flv: window.chimeeKernelFlv,
+  //   hls: window.chimeeKernelHls
+  // },
+  // width: 60,
+  // height: 90,
+  volume: 0.1,
+  // autoplay: true,
+  controls: true,
+});
+[ 'touchstart', 'touchmove', 'touchend' ].forEach(key => {
+  player.$on(key, evt => console.log(evt, key));
+});
+
+window.player = player;
diff --git a/lib/index.dev.js.map b/lib/index.dev.js.map