一个简单的移动端视频组件的实现

作者: 小a草日期: 2017-07-03

279664

一个简单的移动端视频组件的实现

据说移动端需要个视频组件，然后自己尝试了一下，不知道能不能用上，有问题希望大家提出来，(>=<)
这里还是采用了标签video的方式来实现的视频播放。
当然video存在一些问题
视频在最顶层的问题，这里需要区分不同的系统和系统版本，
ios系统
在ios8以下，video处于最顶层
在ios8以上ios10以下的iphone上视频在不播放时，不会处于最顶层，如果播放，视频就会自动全屏，处于最顶层，
在ios10以上的iphone系统上视频不播放和播放时，都不会自动全屏，并处于最顶层。
android系统
在安卓系统下，video处于最顶层，播放视频会自动全屏，但是最近发现在侥幸三星手机自带的浏览器下video在播放和不播放时都不会处于最顶层。

以上是对移动端有关video支持情况的一点了解，如果有错误或者不完整的地方，希望大家补充。

来简单的说明一下自己尝试实现的组件（主要是基于ios中较好支持video的系统版本实现）
1>创建是在初始化配置后自动创建, 所用方法

create();

2>在创建后进行一些事件的功能绑定，功能包括（播放，暂停，拖动视频进度条，视频源的切换，全屏播放控制，退出全屏等）
主要用到的事件类型

onclick,  ontouchstart, ontouchmove

3>在实现时注意遇到的问题，
为了实现自定义的控制视频面板，取消默认的全屏播放，当然就要影藏video自带的默认控制面板，禁止全屏。

//采用css的方式影藏(最好添加video父元素，不然会影藏掉所有的video元素的控制条)
    <style>
        #videocom video::-webkit-media-controls-enclosure{
            display:none;
        }
    </style>
        <video webkit-playsinline playsinline></video>

//在播放视频前，采用的是在视频数据加载完成的情况下才能开始播放
that.selele('videoele').onloadedmetadata = function() {
    that.selele('videoele').play();
}

但是在andrioid机上点击播放后，视频正常播放的情况下，再次触摸video层会出现默认播放控制面板，所以在安卓机上不做自定义控制面板。（然而三星自带浏览器，不会出现默认的播放控制面板，为了能够保证三星自带浏览器正常观看视频，所以在video上增加了播放和暂停）

4>引用方法

<div id="main"></div>//需要创建视频组件的父容器
<script src="https://test.nie.163.com/test_cdn/test/m/zt/20170703201422/js/video_1b67226.js"></script>//引入对应的js文件
<script>
    $video.init({
            el:"main",//创建的父元素id
            btncolor:"#c9c9c9",//控制按钮的颜色
            bgcolor:"",//控制条的背景颜色
            bgprocolor:"",//进度条显示进度颜色
            autoplay:false,//开启自动播放，false不能自动播放
            loopplay:true,//true自动循环播放，false不自动循环播放
            controlsstate:{
                playbtn:true,//播放和暂停按钮显示，false不显示
                toggbtn:true,//下一个和上一个视频切换按钮显示，false不显示
                processbtn:true,//播放进度条显示，false不显示
                fullbtn:true//全屏按钮显示
            },
            //视频源地址支持mp4
            src:["http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4","http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4","http://v.crazynote.netease.com/2016/1203/01bcca1963e8ac1e1d43eb83a29a272dqt.mp4","http://v.crazynote.netease.com/2016/1203/01bcca1963e8ac1e1d43eb83a29a272dqt.mp4","http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4"]
        });
</script>

demo地址 https://test.nie.163.com/test_html/test/test/m/video/

gitlab地址 https://git-wz.nie.netease.com/test/test-zt-m-video-20170703

手机阅读请扫描下方二维码：

none

上一篇：ECMAScript 2016 Language Specification (5) 下一篇：Babel插件在fis项目中遇到的问题

已有 164 条评论

admin

2020-10-23 09:51:04

12345678

回复
1. admin
  
  2020-10-23 10:48:55
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 11:52:43
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 13:55:56
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:00:51
    
    12345678
    
    admin
    
    2020-11-28 14:04:00
    
    12345678
    
    admin
    
    2020-11-28 14:12:35
    
    12345678
    
    admin
    
    2020-11-28 14:11:30
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:42:04
    
    12345678
    
    admin
    
    2020-11-28 15:21:58
    
    12345678
    
    admin
    
    2020-11-28 14:21:48
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:43:05
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 16:00:46
    
    12345678
    
    回复
  2. admin
    
    2020-11-28 13:53:03
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:06:52
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 15:20:14
    
    12345678
    
    admin
    
    2020-11-28 14:16:22
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 15:17:21
    
    12345678
    
    回复
  3. admin
    
    2020-11-28 14:10:04
    
    12345678
    
    回复
  4. admin
    
    2020-11-28 14:19:05
    
    12345678
    
    回复
  5. admin
    
    2020-11-28 14:27:04
    
    12345678
    
    回复
  6. admin
    
    2020-11-28 14:41:03
    
    12345678
    
    回复
  7. admin
    
    2020-11-28 15:14:30
    
    12345678
    
    回复
  8. admin
    
    2020-11-28 15:23:16
    
    12345678
    
    回复
  9. admin
    
    2020-11-28 15:59:26
    
    12345678
    
    回复
  10. admin
    
    2020-11-28 16:59:20
    
    12345678
    
    回复
  11. admin
    
    2020-11-28 16:59:20
    
    12345678
    
    回复
  12. admin
    
    2020-11-28 16:59:20
    
    12345678
    
    回复
  13. admin
    
    2020-11-28 16:59:20
    
    12345678
    
    回复
  14. 1
    
    2023-03-18 08:12:49
    
    555
    
    回复
  15. 1
    
    2023-03-21 02:18:54
    
    1
    
    回复
  16. 1
    
    2023-03-24 14:33:11
    
    555
    
    回复
  17. 1
    
    2023-03-26 12:58:56
    
    1
    
    回复
  18. 1
    
    2023-04-04 21:27:11
    
    555
    
    回复
  19. 1
    
    2023-09-11 17:55:02
    
    555
    
    回复
  20. 1
    
    2023-09-14 22:26:13
    
    555
    
    回复
  21. 1
    
    2023-09-15 21:29:50
    
    555
    
    回复
  22. 1
    
    2023-09-23 03:29:21
    
    1
    
    回复
  23. 1
    
    2024-03-13 10:13:21
    
    1
    
    回复
2. admin
  
  2020-10-23 10:49:56
  
  12345678
  
  回复
3. admin
  
  2020-10-23 10:49:56
  
  12345678
  
  回复
4. admin
  
  2020-10-23 10:49:56
  
  12345678
  
  回复
5. admin
  
  2020-11-28 13:58:40
  
  12345678
  
  回复
6. admin
  
  2020-11-28 13:59:40
  
  12345678
  
  回复
7. admin
  
  2020-11-28 14:15:16
  
  12345678
  
  回复
8. admin
  
  2020-11-28 17:07:28
  
  12345678
  
  回复
9. admin
  
  2020-11-28 17:08:28
  
  12345678 'and(selectfrom(select+sleep(2))a//union/*/select+1)='
  
  回复
10. admin
  
  2020-11-28 17:08:28
  
  12345678 'and/**/convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1990693947')))>'0
  
  回复
11. admin
  
  2020-11-28 17:08:28
  
  12345678 鎈'"(
  
  回复
12. admin
  
  2020-11-28 17:08:28
  
  12345678 "and(selectfrom(select+sleep(0))a//union/*/select+1)="
  
  回复
13. admin
  
  2020-11-28 17:08:28
  
  12345678 '"(
  
  回复
14. 1
  
  2023-01-25 14:03:24
  
  1
  
  回复
15. 1
  
  2023-01-25 14:03:24
  
  1
  
  回复
16. 1
  
  2023-03-18 08:29:32
  
  1
  
  回复
17. 1
  
  2023-03-20 23:58:35
  
  1
  
  回复
18. 1
  
  2023-03-24 14:25:59
  
  1
  
  回复
19. 1
  
  2023-04-01 02:42:09
  
  1
  
  回复
20. 1
  
  2023-04-03 11:14:37
  
  1
  
  回复
21. 1
  
  2023-04-04 21:57:40
  
  1
  
  回复
22. 1
  
  2023-09-11 18:33:37
  
  1
  
  回复
23. 1
  
  2023-09-14 20:42:55
  
  1
  
  回复
24. 1
  
  2023-09-15 19:41:30
  
  1
  
  回复
25. 1
  
  2023-09-23 03:28:00
  
  1
  
  回复
26. 1
  
  2023-10-05 08:09:32
  
  1
  
  回复
27. 1
  
  2024-03-13 10:11:34
  
  1
  
  回复
28. 1
  
  2024-07-02 16:57:20
  
  1
  
  回复
29. 1
  
  2024-07-15 20:06:43
  
  1
  
  回复
admin

2020-10-23 09:51:04

12345678

回复
1. admin
  
  2020-11-28 13:57:30
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 14:01:54
    
    12345678
    
    回复
  2. admin
    
    2020-11-28 14:02:57
    
    12345678
    
    回复
2. admin
  
  2020-11-28 14:24:08
  
  12345678
  
  回复
3. admin
  
  2020-11-28 14:44:14
  
  12345678
  
  回复
admin

2020-10-23 09:51:04

12345678

回复
1. admin
  
  2020-10-23 10:38:11
  
  12345678
  
  回复
2. admin
  
  2020-10-23 10:40:32
  
  12345678
  
  回复
3. admin|expr 952174064 + 826242366
  
  2020-10-23 10:41:58
  
  12345678
  
  回复
4. admin%0d%0aCRLF-Header:CRLF-Value
  
  2020-10-23 10:41:58
  
  12345678
  
  回复
5. nwmjaalhawgccwouuaqp
  
  2020-10-23 10:41:58
  
  12345678
  
  回复
6. admin&set /A 873040659+840480278
  
  2020-10-23 10:41:58
  
  12345678
  
  回复
7. admin
  
  2020-10-23 10:45:56
  
  12345678
  
  回复
8. admin
  
  2020-10-23 10:45:56
  
  12345678
  
  回复
9. admin
  
  2020-10-23 10:45:56
  
  12345678
  
  回复
10. admin
  
  2020-10-23 10:48:55
  
  12345678
  
  回复
admin

2020-10-23 09:51:04

12345678

回复
admin

2020-10-23 09:51:04

ytllmsvtcudkkaiwdrlw

回复
admin

2020-10-23 09:51:04

12345678

回复
admin%0d%0aCRLF-Header:CRLF-Value

2020-10-23 09:51:04

12345678

回复
ytllmsvtcudkkaiwdrlw

2020-10-23 09:51:04

12345678

回复
admin

2020-10-23 09:51:04

12345678

回复
admin

2020-10-23 09:52:38

12345678

回复
1. admin
  
  2020-11-28 14:30:16
  
  12345678
  
  回复
admin

2020-10-23 09:52:38

12345678

回复
admin

2020-10-23 09:52:38

12345678

回复
1. admin
  
  2020-11-28 14:22:50
  
  12345678
  
  回复
admin

2020-10-23 10:41:58

12345678

回复
admin

2020-10-23 10:48:55

12345678

回复
1. 1
  
  2021-11-01 02:38:25
  
  1
  
  回复
2. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
3. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
4. 1
  
  2021-11-01 02:56:37
  
  %{41131*40657}
  
  回复
5. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
6. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
7. 1
  
  2021-11-01 02:56:37
  
  '+(43649*43683)+'
  
  回复
8. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
9. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
10. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
11. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
12. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
13. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
14. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
15. %{44679*43002}
  
  2021-11-01 02:56:37
  
  1
  
  回复
16. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
17. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
18. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
19. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
20. 1
  
  2021-11-01 02:56:37
  
  1
  
  回复
1

2021-11-01 02:56:37

1

回复
1

2021-11-01 02:56:37

1

回复
Crawlergo

2022-01-31 01:50:26

Crawlergo

回复
1. 1
  
  2022-03-06 03:18:38
  
  1
  
  回复
2. 1
  
  2022-03-06 10:05:47
  
  1
  
  回复
3. 1
  
  2022-03-06 10:05:47
  
  1
  
  回复
4. 1
  
  2022-03-06 10:06:47
  
  1
  
  回复
  1. 1
    
    2022-09-27 09:12:37
    
    1
    
    回复
1

2023-01-25 09:20:21

1

回复
1

2023-01-25 09:20:21

1

回复
1

2023-02-28 03:44:32

1

回复
1

2023-02-28 03:44:32

1

回复
1

2023-02-28 03:50:18

555

回复
1. 1
  
  2023-03-04 10:16:31
  
  1
  
  回复
1

2023-03-18 08:07:26

1

回复
1

2023-03-18 08:23:20

555

回复
1. 1
  
  2023-03-20 11:56:29
  
  1
  
  回复
2. 1
  
  2023-03-20 12:31:44
  
  &content;
  
  回复
3. 1
  
  2023-03-20 12:32:44
  
  1
  
  回复
4. 1
  
  2023-03-20 12:32:44
  
  1
  
  回复
1

2023-03-20 23:09:40

1

回复
1

2023-03-21 00:02:28

1

回复
1

2023-03-24 13:35:31

1

回复
1

2023-03-24 14:02:28

555

回复
1

2023-03-26 12:45:06

1

回复
1

2023-04-01 02:19:31

1

回复
1

2023-04-03 09:15:53

1

回复
1

2023-04-04 21:24:53

1

回复
1

2023-04-04 21:28:34

555

回复
1

2023-06-23 06:42:44

1

回复
1

2023-06-23 06:42:44

1

回复
1

2023-09-11 17:33:41

1

回复
1

2023-09-11 19:46:14

555

回复
1

2023-09-12 00:23:19

1

回复
1

2023-09-14 19:30:45

1

回复
1

2023-09-14 19:58:42

555

回复
1

2023-09-15 18:21:54

1

回复
1

2023-09-15 18:46:10

555

回复
1

2023-09-16 03:55:13

1

回复
1

2023-09-23 02:10:57

1

回复
1

2023-09-23 10:26:43

1

回复
1

2023-10-05 05:46:20

1

回复
1

2024-03-13 08:32:28

1

回复
1

2024-07-02 15:16:59

1

回复
1

2024-07-15 18:39:07

1

回复
1. 1
  
  2024-08-09 06:59:10
  
  1
  
  回复
1

2024-08-28 05:20:31

1

回复

做有态度的前端团队

一个简单的移动端视频组件的实现