@liveqing/liveplayer 2.7.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/component/liveplayer-component.min.js +1 -1
  2. package/dist/component/liveplayer-lib.min.js +1 -1
  3. package/dist/element/index.html +99 -99
  4. package/dist/element/liveplayer-element.min.js +1 -1
  5. package/package.json +1 -1
package/dist/element/index.html CHANGED
@@ -1,100 +1,100 @@
1
- <!DOCTYPE HTML>
2
- <html>
3
-
4
- <head>
5
- <title>liveplayer</title>
6
- <meta charset="utf-8">
7
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8
- <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
9
- </head>
10
-
11
- <body style="margin:0">
12
- <!--多清晰度播放示例-->
13
- <!-- <live-player video-url="http://192.168.1.11:10080/fvod/GTUGsiqig/video.m3u8" show-custom-button="true" autoplay="true" aspect="16:9" resolution="yh,fhd,hd,sd" resolutiondefault="fhd"></live-player> -->
14
- <!--HTTP-FLV直播播放示例-->
15
- <!-- <live-player video-url="http://192.168.1.11:10080/flv/vlive/68i3az6mg.flv" live="true" aspect="fullscreen"></live-player> -->
16
- <!--RTMP播放示例-->
17
- <!-- <live-player video-url="rtmp://192.168.1.11:10085/vlive/_9VKyi3mg" live="true" aspect="fullscreen"></live-player> -->
18
- <!--M3U8播放示例-->
19
- <!-- <live-player video-url="http://192.168.1.11:10080/vhls/_9VKyi3mg/_9VKyi3mg_live.m3u8" live="true" aspect="16:9"></live-player> -->
20
- <!--mp4播放示例-->
21
- <!-- <live-player video-url="http://192.168.1.11:10080/vod/download/mwoDv_iWR" muted="true" aspect="16:9"></live-player> -->
22
-
23
- <!-- <live-player id="player01" video-url="http://192.168.2.135:10080/vhls/0XpHAMvWR/0XpHAMvWR_live.m3u8" live="true" aspect="16:9" stretch="true">
24
- <div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
25
- </live-player> -->
26
-
27
- <!-- <live-player video-url="http://192.168.2.135:10080/flv/hls/ZJ9rizvZg.flv" live="true" aspect="16:9" stretch="true"></live-player> -->
28
-
29
- <script>
30
- window.onload = function () {
31
- // 页面加载完成以后执行
32
- //--------------------JavaScript 交互示例, 当前示例页面放置到web容器里通过http请求访问页面--------------------
33
- // var player = document.getElementById('player01');
34
- // var videoUrlBak = "";
35
- // document.addEventListener("visibilitychange", () => {
36
- // if (document.visibilityState === 'visible') {
37
- // if(videoUrlBak) {
38
- // console.log("标签页恢复可见, 继续播放...");
39
- // player.setAttribute("video-url", videoUrlBak);
40
- // }
41
- // } else {
42
- // console.log("标签页不可见, 停止播放...");
43
- // videoUrlBak = player.getAttribute("video-url");
44
- // player.setAttribute("video-url", "");
45
- // }
46
- // });
47
- // player.addEventListener('snapOutside', function(evt) {
48
- // console.log('获取快照 base64 数据', evt.detail[0]);
49
- // });
50
- // player.addEventListener('customButtons', function(evt) {
51
- // console.log('自定义按钮点击回调 按钮名称', evt.detail[0])
52
- // });
53
- // player.addEventListener('fullscreen', function(evt) {
54
- // console.log('fullscreen', evt.detail[0]);
55
- // });
56
- // setTimeout(function() {
57
- // console.log("快照, 回调 snapOutside...");
58
- // player.getVueInstance().snap();
59
- // console.log("静音...");
60
- // player.getVueInstance().setMuted(true);
61
- // console.log("静音状态: " + player.getVueInstance().getMuted());
62
- // console.log("暂停...");
63
- // player.getVueInstance().pause();
64
- // console.log("暂停状态: " + player.getVueInstance().paused());
65
- // console.log("全屏状态: " + player.getVueInstance().isFullscreen());
66
- // //触发全屏, 需要放置到交互事件回调中
67
- // //btn.onclick = () => { player.getVueInstance().requestFullscreen(); }
68
- // player.getVueInstance().setMuted(false);
69
- // console.log("音量: " + player.getVueInstance().getVolume());
70
- // player.getVueInstance().setVolume(0.5);
71
- // console.log("音量1: " + player.getVueInstance().getVolume());
72
- // player.getVueInstance().setVolume(0.3);
73
- // console.log("音量2: " + player.getVueInstance().getVolume());
74
- // }, 3000);
75
- // setTimeout(function() {
76
- // console.log("放音...");
77
- // player.getVueInstance().setMuted(false);
78
- // console.log("静音状态: " + player.getVueInstance().getMuted());
79
- // console.log("播放...");
80
- // player.getVueInstance().play();
81
- // console.log("暂停状态: " + player.getVueInstance().paused());
82
- // }, 6000);
83
- // setTimeout(function() {
84
- // console.log("切换媒体源...");
85
- // player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdns.com/live/hks2");
86
- // }, 9000);
87
-
88
- //--------------------常见问题--------------------
89
- //1、提示： TypeError: The element or ID supplied is not valid. (videojs)
90
- //检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）
91
-
92
- //2、提示：Access to XMLHttpRequest at ... from origin .... has been blocked by CORS policy
93
- //检查 video-url 设置的播放地址 是否允许跨域访问
94
-
95
- //3、设置为 aspect='fullscreen'时，父级元素加上 position: relative
96
- }
97
- </script>
98
- <script src="liveplayer-element.min.js"></script></body>
99
-
1
+ <!DOCTYPE HTML>
2
+ <html>
3
+
4
+ <head>
5
+ <title>liveplayer</title>
6
+ <meta charset="utf-8">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8
+ <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
9
+ </head>
10
+
11
+ <body style="margin:0">
12
+ <!--多清晰度播放示例-->
13
+ <!-- <live-player video-url="http://192.168.1.11:10080/fvod/GTUGsiqig/video.m3u8" show-custom-button="true" autoplay="true" aspect="16:9" resolution="yh,fhd,hd,sd" resolutiondefault="fhd"></live-player> -->
14
+ <!--HTTP-FLV直播播放示例-->
15
+ <!-- <live-player video-url="http://192.168.1.11:10080/flv/vlive/68i3az6mg.flv" live="true" aspect="fullscreen"></live-player> -->
16
+ <!--RTMP播放示例-->
17
+ <!-- <live-player video-url="rtmp://192.168.1.11:10085/vlive/_9VKyi3mg" live="true" aspect="fullscreen"></live-player> -->
18
+ <!--M3U8播放示例-->
19
+ <!-- <live-player video-url="http://192.168.1.11:10080/vhls/_9VKyi3mg/_9VKyi3mg_live.m3u8" live="true" aspect="16:9"></live-player> -->
20
+ <!--mp4播放示例-->
21
+ <!-- <live-player video-url="http://192.168.1.11:10080/vod/download/mwoDv_iWR" muted="true" aspect="16:9"></live-player> -->
22
+
23
+ <!-- <live-player id="player01" video-url="http://192.168.2.135:10080/vhls/0XpHAMvWR/0XpHAMvWR_live.m3u8" live="true" aspect="16:9" stretch="true">
24
+ <div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div>
25
+ </live-player> -->
26
+
27
+ <!-- <live-player video-url="http://192.168.2.135:10080/flv/hls/ZJ9rizvZg.flv" live="true" aspect="16:9" stretch="true"></live-player> -->
28
+
29
+ <script>
30
+ window.onload = function () {
31
+ // 页面加载完成以后执行
32
+ //--------------------JavaScript 交互示例, 当前示例页面放置到web容器里通过http请求访问页面--------------------
33
+ // var player = document.getElementById('player01');
34
+ // var videoUrlBak = "";
35
+ // document.addEventListener("visibilitychange", () => {
36
+ // if (document.visibilityState === 'visible') {
37
+ // if(videoUrlBak) {
38
+ // console.log("标签页恢复可见, 继续播放...");
39
+ // player.setAttribute("video-url", videoUrlBak);
40
+ // }
41
+ // } else {
42
+ // console.log("标签页不可见, 停止播放...");
43
+ // videoUrlBak = player.getAttribute("video-url");
44
+ // player.setAttribute("video-url", "");
45
+ // }
46
+ // });
47
+ // player.addEventListener('snapOutside', function(evt) {
48
+ // console.log('获取快照 base64 数据', evt.detail[0]);
49
+ // });
50
+ // player.addEventListener('customButtons', function(evt) {
51
+ // console.log('自定义按钮点击回调 按钮名称', evt.detail[0])
52
+ // });
53
+ // player.addEventListener('fullscreen', function(evt) {
54
+ // console.log('fullscreen', evt.detail[0]);
55
+ // });
56
+ // setTimeout(function() {
57
+ // console.log("快照, 回调 snapOutside...");
58
+ // player.getVueInstance().snap();
59
+ // console.log("静音...");
60
+ // player.getVueInstance().setMuted(true);
61
+ // console.log("静音状态: " + player.getVueInstance().getMuted());
62
+ // console.log("暂停...");
63
+ // player.getVueInstance().pause();
64
+ // console.log("暂停状态: " + player.getVueInstance().paused());
65
+ // console.log("全屏状态: " + player.getVueInstance().isFullscreen());
66
+ // //触发全屏, 需要放置到交互事件回调中
67
+ // //btn.onclick = () => { player.getVueInstance().requestFullscreen(); }
68
+ // player.getVueInstance().setMuted(false);
69
+ // console.log("音量: " + player.getVueInstance().getVolume());
70
+ // player.getVueInstance().setVolume(0.5);
71
+ // console.log("音量1: " + player.getVueInstance().getVolume());
72
+ // player.getVueInstance().setVolume(0.3);
73
+ // console.log("音量2: " + player.getVueInstance().getVolume());
74
+ // }, 3000);
75
+ // setTimeout(function() {
76
+ // console.log("放音...");
77
+ // player.getVueInstance().setMuted(false);
78
+ // console.log("静音状态: " + player.getVueInstance().getMuted());
79
+ // console.log("播放...");
80
+ // player.getVueInstance().play();
81
+ // console.log("暂停状态: " + player.getVueInstance().paused());
82
+ // }, 6000);
83
+ // setTimeout(function() {
84
+ // console.log("切换媒体源...");
85
+ // player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdns.com/live/hks2");
86
+ // }, 9000);
87
+
88
+ //--------------------常见问题--------------------
89
+ //1、提示： TypeError: The element or ID supplied is not valid. (videojs)
90
+ //检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）
91
+
92
+ //2、提示：Access to XMLHttpRequest at ... from origin .... has been blocked by CORS policy
93
+ //检查 video-url 设置的播放地址 是否允许跨域访问
94
+
95
+ //3、设置为 aspect='fullscreen'时，父级元素加上 position: relative
96
+ }
97
+ </script>
98
+ <script src="liveplayer-element.min.js"></script></body>
99
+
100
100
  </html>