原生js Html + video js 自定义视频播放器

最新推荐文章于 2024-03-24 10:00:00 发布

ppfxdj

最新推荐文章于 2024-03-24 10:00:00 发布

阅读量984

点赞数

分类专栏：前端文章标签： js javascript html

本文链接：https://blog.csdn.net/ppfxdj/article/details/115306339

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述

创建一个html 引入video.js CDN

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

HTML 部分 (下边js部分效果需要最少两个Video 标签视频)

<video
    id="my-video"
    class="video-js vjs-big-play-centered"
    controls
    preload="auto"
    width="600"
    height="300"
    poster="./img/banner_1.jpg"
    data-setup="{}"
  >
    <source src="https://ypy48001.baomihua.com/d93b00adaf88972f3d1db8bd814cb528/60614D60/3564/35637193_9_4e9d4684174b11e59a92003048cc631a.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
 </video>

JS 部分 (多个h5播放器video，点击一个播放其他暂停)

var videos = document.getElementsByTagName('video');
	console.log(videos)
            for (var i = videos.length - 1; i >= 0; i--) {
                (function(){
                    var p = i;
                    videos[p].addEventListener('play',function(){
                        pauseAll(p);
                    })
                })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            };

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
  	 <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
    <title>自定义视频播放器</title>
</head>
<body>
<main>
	<video
    id="my-video"
    class="video-js vjs-big-play-centered"
    controls
    preload="auto"
    width="600"
    height="300"
    poster="./img/banner_1.jpg"
    data-setup="{}"
  >
    <source src="https://ypy48001.baomihua.com/d93b00adaf88972f3d1db8bd814cb528/60614D60/3564/35637193_9_4e9d4684174b11e59a92003048cc631a.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
 </video>


</main>
</body>
</html>
<script type="text/javascript">
	var videos = document.getElementsByTagName('video');
	console.log(videos)
            for (var i = videos.length - 1; i >= 0; i--) {
                (function(){
                    var p = i;
                    videos[p].addEventListener('play',function(){
                        pauseAll(p);
                    })
                })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            };
</script>

video.js 官方文档链接

https://videojs.com/getting-started/

部分video.js 功能

https://www.cnblogs.com/chenyingying0/p/12422727.html

ppfxdj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
原生js Html + video js 自定义视频播放器

创建一个html 引入video.js CDN<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /><script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>HTML 部分 (下边js部分效果需要最少两个Video 标签视频)<video id="my-video" ..
复制链接

扫一扫