html视频设置自动播放下一个,在html5中，如何使用video标签让两个不同的视频文件按顺序自动播放？...
在html5中，如何使用video标签让两个不同的视频文件按顺序自动播放？
设计让两个视频按顺序自动播放的思路如下：
1、 创建一个video元素，设置其播放资源为第一个视频资源
2、 设置当视频进行播放如果是隐藏状态就会显示出来。
3、 通过循环遍历改变video元素中设置播放资源的属性
下面我们通过一个简单的示例来进行演示。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media: 动态加载</title>
<body>
<article>
<h1>Media<span> - 动态加载</span></h1>
</article>
<div id="result-stub" class="well hidden">
//创建一个Video元素用来播放视频这里自定义了两个属性firstfile，secondfile他们的值要分别为播放的第一个视频资源和第二个视频资源。
<video id="vid"
firstfile="video1"
secondfile="video2" controls width="320">
//视频资源设首先置为第一个视频资源
<source src="../media/video1.mp4" type="video/mp4" />
<source src="../media/video1.ogv" type="video/ogg" />
<source src="../media/video1.webm" type="video/webm" />
</video>
</div>
<script >
window.οnlοad= function() {
//---获取video元素对象
var $video = $('#vid');
//设置当视频正在播放时，如果是隐藏状态就会以淡入的效果显示出来
$video.on('play', function() {
if (!$video.is(':visible')) {
$video.fadeIn();
}
});
//当视频播放结束时动态加载第二个视频
$video.on('ended', function() {
//获取video独享
var
video = this,
//获取source对象，这样我们就可以通过该对象来修改video元素播放视频的来源。
sources =
video.getElementsByTagName('source'),
//获取第一个视频资源的资源名称
oldFileName =
$video.attr('firstfile'),
//获取第二个视频资源的资源名称
newFileName =
$video.attr('secondfile'),
forEach = Array.prototype.forEach;
// 检查是否成功加载最后一个视频
if(sources[0].src.indexOf(newFileName) === -1){
//通过遍历的方式将video的sources的src属性由第一个资源名称改为第二个资源名称
forEach.call(sources, function(source) {
source.src =
source.src.replace(oldFileName,
newFileName);
});
//加载和播放新视频
$video.fadeOut(function() {
video.load();
video.play();
});
}
});
//---
}
</script>
<script src="../js/jquery.js"></script>
</body>
</html>
有关于HTML5中的相关知识建议你可以到一个叫做秒秒学的网站中学习一下，里面有专门讲解HTML5的课程。
html视频设置自动播放下一个,在html5中，如何使用video标签让两个不同的视频文件按顺序自动播放？...相关推荐
- HTML5中关于解决video标签禁止右键和下载视频的办法
近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户.消息.项目.分享.文件提取.收藏.回收站等主要功能,领挖还有一些office.压缩包.图片.文本.音频和视频的预览功能. 音频我使用的是 ...
- 抖音为什么不出一个自动播放下一个视频的功能呢？
你也许看到过很多抖音如何自动播放下个的教程文章.不过点击进去都是告诉你不可能,做不到.抖音没有这个功能等等... 于是乎我就想了一下,抖音为什么不出这么一个功能呢? 考虑后觉得啊,可能抖音是要根据你对 ...
- 抖音助手，帮您自动切换下一个视频
我发现了一个抖音自动下一个播放视频的辅助软件,很方便,不用自己手动滑动到下一个视频去播放.而且遇到长视频也会自动等待视频播放完毕再切换下一个.确实方便啊. 尤其是开车手机放到那,不用看,想听听抖音的歌 ...
- vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由
Vue.js是那么地易上手,它在提供了大量开箱即用的功能的同时也提供了良好的性能.请继续阅读以下事例及代码片段以便更加了解Vue.js. 选择一个JavaScript框架真是太难了--因为有太多的框架 ...
- html5微信视频禁止自动全屏,关于HTML5 video标签在安卓版微信浏览器内被强行全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强行全屏播放问题.原计划在视频播放完毕后,页面出现video的ended事件时,应该显示分享和处于转化页的按钮,如图: 然而在这 ...
- 直播风口之下，视频社交会成为下一个流量平台吗？
2015年的中国,视频内容迎来了集中爆发,从视频内容付费的兴起,到直播领域的新闻不断,视频已经成为了当今网民的主要消费品.2016年初,在faceu兴起的同时,Wecut融资成功,快手日活超过1000 ...
- 强制 html5 播放,关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题...
最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题.原计划在视频播放完毕后,页面发生video的ended事件时,应该显示分享和进入转化页的按钮,如图: 然而在很 ...
- 如何阻止YouTube在Chromecast上自动播放下一个视频
When you use your Chromecast for YouTube videos, there's an annoying feature where suggested videos ...
- android短视频列表自动播放,刷宝短视频如何自动播放下一个 自动播放下一个方法...
基础玩法:观看视频拿元宝 用户在刷视频时,界面上会出现一个元宝图标,图标外圈是进度条.只要用户看视频,进度条就会慢慢画出一个圆. 进度条每画完一个圆,用户就会得到一定额度的元宝积分.积分会储存在账户中 ...
- html5 video自动播放下一个源码
演示地址:http://wjsou.com/video.html <!doctype html> <html lang="en"> <head> ...
最新文章
- kuka机器人if逻辑编程_KUKA机器人调试的程序语法是什么
- 遗传算法系统辨识matlab程序,8.8 基于遗传算法的机械手参数辨识 系统辨识理论及Matlab仿真课件.ppt...
- 瀑布流布局JavaScript实现
- mysql 多行唯一_mysql – 具有唯一约束的原子多行更新
- 单片机汇编语言编程_单片机编程用C语言还是汇编？
- ArchLinux(2013)中的网络配置和静态IP时DNS刷新的解决方法
- redis php高级使用_项目中应用Redis+Php的场景
- 新建test.c为什么没有.h文件_新建STM32工程全局声明两个宏的原因
- 定向搜索（beam search）
- 连续系统离散化_连续系统转化为离散系统之 z 变换
- matlab波导色散,有效折射率法求矩形波导色散曲线(附Matlab程序)
- 谷歌浏览器一直显示弹框登陆代理解决方法
- 计算机硬件清理步骤,联想笔记本电脑清理灰尘详细步骤
- hdu3709——数位dp+枚举
- IT前沿技术之node.js篇一：Node.js与javascript
- linux 自带的python软连接被误删恢复
- Visual Studio 2017安装使用方法
- 教授建议：科研人员压力太大，应该培养一些吃喝玩乐之类“庸俗”的爱好
- 遮月夜（2018.6.26）
- 用Google搜索本地硬盘