Update artplayer plugin versions

docs/assets/css/style.css

@@ -116,7 +116,6 @@ input[type="file"] {
 
 .header .menus .has-sub-menu {
     position: relative;
-    cursor: pointer;
 }
 
 .header .menus .has-sub-menu:hover .sub-menu {
@@ -127,28 +126,36 @@ input[type="file"] {
     display: none;
     position: absolute;
     z-index: 9;
-    top: 45px;
+    top: 40px;
     left: 0;
     width: 250px;
     padding: 0 10px;
-    background: #2b2b2b;
+    background: #1b1b1b;
+    border-radius: 3px;
+    border: 1px solid rgb(255, 255, 255, 0.05);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 .header .menus .has-sub-menu .sub-menu ul {
     padding: 0;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
 .header .menus .has-sub-menu .sub-menu li {
     display: block;
     list-style: none;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
 }
 
 .header .menus .has-sub-menu .sub-menu li.title {
     color: #fff;
     font-size: 16px;
     margin-bottom: 15px;
+    font-weight: bold;
+}
+
+.header .menus .has-sub-menu .sub-menu li a:hover {
+    text-decoration: underline;
 }
 
 .header .run {

docs/assets/example/dash.js

@@ -0,0 +1,24 @@
+function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});

docs/assets/example/flv.js

@@ -0,0 +1,25 @@
+function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});

docs/assets/example/hls.js

@@ -0,0 +1,27 @@
+function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});

docs/assets/example/mpegts.js

@@ -0,0 +1,31 @@
+function playFlv(video, url, art) {
+	if (mpegts.isSupported()) {
+		if (art.flv) art.flv.destroy();
+
+		const flv = mpegts.createPlayer({
+			type: 'flv',
+			url: url
+		});
+		flv.attachMediaElement(video);
+		flv.load();
+		flv.play();
+
+		art.flv = flv;
+		art.on('destroy', () => flv.destroy());
+	} else {
+		art.notice.show = 'Unsupported playback format: flv';
+	}
+}
+
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.flv',
+	type: 'flv',
+	customType: {
+		flv: playFlv,
+	},
+});
+
+art.on('ready', () => {
+	console.info(art.flv);
+});