video.js 移动端视频播放器插件心得

最新推荐文章于 2024-06-13 14:55:33 发布

HoneyYZY

最新推荐文章于 2024-06-13 14:55:33 发布

阅读量2.3w

点赞数 2

分类专栏：发现文章标签： HTML JS video 插件

本文链接：https://blog.csdn.net/HoneyYZY/article/details/80675250

版权

发现专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目开发遇到视频播放，考虑到不同移动端需要统一风格，所以选择用视频播放插件。看了试了好多插件，发现video.js用量最多（必有其好处），用法也很便捷。video.js jquery插件库，可直接下载不需要积分；api也有；

但是在移动端的兼容不是很好。

问题：移动端上点击按钮开始后，再次点击视频，不会暂停。（自己测试，click事件在移动端点击视频，不触发（不明所以））；

解决：自己写了js，问题解决。（用touch类事件，见代码）；

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Video.js 6.2.8</title>
    <link href="css/video-js.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/video.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <style>
        body {
            background-color: #191919
        }

        .m {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
    </style>
</head>

<body>
<div class="m">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1000" height="400"
           poster="video/cover.jpg"
           data-setup="{}">
        <source src="video/top_video.mp4" />
        <source src="" type='video/webm'/>
        <source src="" type='video/ogg'/>
        <!--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>-->
        <!--<!– Tracks need an ending tag thanks to IE9 –>-->
        <!--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>-->
        <!--<!– Tracks need an ending tag thanks to IE9 –>-->
    </video>

    <script type="text/javascript">
        var myPlayer = videojs('example_video_1');
        videojs("example_video_1").ready(function () {
            var myPlayer = this;
            myPlayer.pause();

        });

        // 在此处为点击video，和点击按钮，都添加上事件，来处理视频的播放暂停；
        $('.m').on('touchstart','#example_video_1_html5_api',function () {
                myPlayer.pause();
                $('.vjs-big-play-button').show();
        })
        $('.m').on('touchstart','.vjs-big-play-button',function () {
            myPlayer.play();
            $('.vjs-big-play-button').hide();
        })


    </script>
</div>
</body>
</html>

HoneyYZY

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
video.js 移动端视频播放器插件心得

项目开发遇到视频播放，考虑到不同移动端需要统一风格，所以选择用视频播放插件。看了试了好多插件，发现video.js用量最多（必有其好处），用法也很便捷。video.js jquery插件库，可直接下载不需要积分；api也有；但是在移动端的兼容不是很好。问题：移动端上点击按钮开始后，再次点击视频，不会暂停。（自己测试，click事件在移动端点击视频，不触发（不明所以））； ...
复制链接

扫一扫