Configuration forceLive

.eslintrc

@@ -2,6 +2,7 @@ parserOptions:
   sourceType: module
 
 env:
+  commonjs: true,
   es6: true
   browser: true
 

example/example.vue

@@ -12,6 +12,7 @@
     </h4>
     <mediaelement ref="vPlay" :autoplay="true" :forceLive="forceLive" preload="true" :source="selected" width="500px" height="500px"></mediaelement>
     <button @click="close">关闭播放</button>
+    <button @click="live">切换进度</button>
   </div>
 </template>
 
@@ -22,6 +23,7 @@ export default {
     return {
       selected: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
       forceLive: false,
+      autoplay: true,
       sources: [{
         name: 'MP4',
         value: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
@@ -65,6 +67,9 @@ export default {
     console.log(this.$refs.vPlay.Features('isIE'));
   },
   methods: {
+    live() {
+      this.forceLive = true;
+    },
     close() {
       console.log(this.$refs);
       this.$refs.vPlay.remove();

package.json

@@ -48,6 +48,7 @@
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "^3.0.1",
     "style-loader": "^0.20.3",
+    "url-loader": "^1.1.2",
     "vue": "2.5.16",
     "vue-loader": "^14.2.2",
     "vue-template-compiler": "2.5.16",

src/mediaelement.vue

@@ -1,9 +1,10 @@
 <template>
-  <video :height="height" :width="width" :autoplay="autoplay" :preload="preload" >
+  <video :height="height" :width="width" :autoplay="autoplay" :preload="preload">
   </video>
 </template>
 
 <style>
+@import '../node_modules/mediaelement/build/mediaelementplayer.min.css';
 .mejs__container {
   min-width: auto !important;
 }
@@ -39,11 +40,12 @@ mediaelementwrapper object{
 // import flvjs from 'flv.js';
 // import hlsjs from 'hls.js';
 import 'mediaelement';
-import 'mediaelement/build/mediaelementplayer.min.css';
+// import 'mediaelement/build/mediaelementplayer.min.css';
 // import 'mediaelement/build/mediaelement-flash-video.swf';
 // import 'mediaelement/build/mediaelement-flash-video-hls.swf';
 
 export default {
+  name: 'mediaelement',
   props: {
     source: {
       type: String,
@@ -89,6 +91,7 @@ export default {
     }
   },
   data: () => ({
+    refresh: false,
     player: null,
   }),
   mounted() {
@@ -104,13 +107,13 @@ export default {
       // (by default, this is set as `sameDomain`)
       // shimScriptAccess: 'always',
       success: (mediaElement, originalNode, instance) => {
+        instance.setSrc(componentObject.source);
         if (componentObject.autoplay) {
-          instance.setSrc(componentObject.source);
+          mediaElement.addEventListener('canplay', function () {
+              instance.play();
+          });
         }
         this.success(mediaElement, originalNode, instance);
-				mediaElement.addEventListener('canplay', function () {
-            instance.play();
-				});
         // mediaElement.addEventListener(Hls.Events.MEDIA_ATTACHED, function () {
         //   // All the code when this event is reached...
         //   console.log('Media attached!');
@@ -142,6 +145,12 @@ export default {
       this.player.setSrc(newSource);
       this.player.setPoster('');
       this.player.load();
+    },
+    forceLive: function (newForceLive, oldForceLive) {
+      if (newForceLive === oldForceLive) {
+        return;
+      }
+      this.player.options.forceLive = newForceLive;
     }
   },
 };

webpack.config.js

@@ -36,6 +36,14 @@ module.exports = {
         test: /\.(png|jpg|gif|svg|swf)$/,
         loader: 'file-loader?name=[name].[ext]'
       }
+      // {
+      //   test: /\.(png|jpg|gif|svg|swf)$/,
+      //   loader: 'url-loader',
+      //   options: {
+      //     limit: 10000,
+      //     name: '[name].[ext]',
+      //   },
+      // }
     ]
   },
   plugins: [