videojs实现视频列表点击播放下个视频

实现效果如下：

1.点击视频暂停或者播放，并显示中间按钮图标。

2.点击下方选集，实现切换到下个视频。

3.点开视频默认自动播放。

代码参考：<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>For list</title>
<link href = "./statics/video-js.css" rel = "stylesheet" type = "text/css">
<script type="text/javascript" src = "./statics/video.min.js"></script>
<script type="text/javascript" src = "./statics/jquery.min.js"></script>
<script type="text/javascript" src = "./statics/lang/zh-CN.js"></script>
<script type="text/javascript">function Test(obj) {var val = $(obj).val();//sourceDom = $("<source src=\""+val+"\">");$("#video-box video").prop("src",val);//$("#video-box video").append("<source src=\""+val+"\">");$("#video-box").show();$("#video-box video").play()
}function test(obj) {var url = $(obj).val();//videojs.options.flash.swf = "__JS_/js/video-js.swf";var myPlayer = videojs("example_video_1");myPlayer.src(url);myPlayer.load(url);}
</script>
</head>
<body><style type="text/css">.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {display: block;.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
}
#button{width:60px;height:50px;line-height:50px;background: #c7c3c3;border:0px;color:#fff;}
</style><div id = "video-box" style="width:1200px;margin:0 auto;margin-top:40px;">
<video id="example_video_1" class="video-js vjs-big-play-centered" controls preload="auto" width="1200" height="650" autoplay="true" bigPlayButton="true"data-setup='{ "html5" : { "nativeTextTracks" : false } }' poster="./images/Snipaste_2021-10-30_22-20-43.png"> <source id="videoURL" src="../video/gw03/gw03.m3u8" type="application/x-mpegURL"></source>...

源码下载：https://download.csdn.net/download/sjby365/35893457

videojs实现视频列表点击播放下个视频相关推荐

Android 音乐播放器的开发教程（六）service的运用及音乐列表点击播放 ----- 小达
service的运用及音乐列表点击播放按照前几篇博客的步骤,应该能看到自己手机里的音乐列表了,但是现在还只能看,不能点,还需要再给ListView添加点击事件的监听,接着启动一个Service来播放 ...
Potplayer固定窗口尺寸【播放下一视频时】
Potplayer 在播放下一个视频时,总是会切换屏幕大小,让人心烦.下面就来分享两个方法,用于解决在播放时固定屏幕的大小方法一第一步,鼠标右键选择打开右键菜单,选择播放--播放设置第二步:自定 ...
PPT放映时无法自动播放视频，同时自动播放两个视频
PPT放映时无法自动播放视频,同时自动播放两个视频选中视频,设置为自动播放模式如果放映时仍不能自动播放文件→选项→高级→显示将"禁用幻灯片放映硬件图形加速"勾选同时播放两 ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
微信小程序 - 音乐列表点击播放 / 暂停音频，流畅切换音频（支持暂停音乐后，保留音乐 “进度“ 继续播放）最好用最详细的源码示例教程，适用于wechat列表点击后播放 mp3 wav 文件的需求
前言网上的教程代码太臃肿且有 BUG,一行注释都没有很难读懂和改造示例. 本文提供一个干净整洁的代码示例,实现了点击列表时,播放.暂停.切换音频,暂停时保留 "进度" 继续播放 ...
抖音为什么不出一个自动播放下一个视频的功能呢？
你也许看到过很多抖音如何自动播放下个的教程文章.不过点击进去都是告诉你不可能,做不到.抖音没有这个功能等等... 于是乎我就想了一下,抖音为什么不出这么一个功能呢? 考虑后觉得啊,可能抖音是要根据你对 ...
如何阻止YouTube在Chromecast上自动播放下一个视频
When you use your Chromecast for YouTube videos, there's an annoying feature where suggested videos ...
linux视频编辑软件字幕,Linux下的视频字幕编辑
一.Linux下的字幕编辑软件常用的有subtitleeditor, gnome-subtitles, gaupol 1.gnome-subtitles:不支持多字幕文件批量处理 2.gaupol: ...
php 小程序播放腾讯视频 video标签无法播放腾讯视频问题
解决小程序播放腾讯视频问题.同适用于微擎.... 需要引用一些腾讯视频网站上的视频去播放,很多地方都是教人用F12抓一个mp4地址,这根本不行,因为那个地址是动态的, 翻了微信小程序的官方社区这方面的 ...

videojs实现视频列表点击播放下个视频

videojs实现视频列表点击播放下个视频相关推荐

最新文章

热门文章

videojs实现视频列表 点击播放下个视频

videojs实现视频列表 点击播放下个视频相关推荐

最新文章

热门文章

videojs实现视频列表点击播放下个视频

videojs实现视频列表点击播放下个视频相关推荐