video设置视频的播放位置(本例中实现效果是视频第一次播放完成后,接下来中从视频的中间部位开始循环播放)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video id="mediaElementID" width="100%" height="100%" autoplay="autoplay" controls="controls" >
<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
</video>
</body>
<script>
var myVid=document.getElementById("mediaElementID");
function getCurTime()
{
alert(myVid.currentTime);
}
function setCurTime()
{
myVid.currentTime=8;
}
myVid.addEventListener('ended',function(){
setCurTime();
myVid.play()
},false);
</script>
</html>
设置currentTime
注:设置currentTime的方式,video的视频的src地址必须是线上的,本地的地址不会起作用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#playervideo{
width:500px;
height:300px;
margin:20px auto;
background:red;
}
#playervideo video{ }
</style>
</head>
<body>
<div id="playervideo" class="portfolio-slideshow flexslider animate-onscroll">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="video/demo.jpg" data-setup="{}" height="300" width="100%">
<source src="artanis-large.mp4" type='video/mp4' />
</video>
</div>
</body>
<script language="javascript">
var vList = ['movie.mp4', 'artanis-large.mp4', 'movie.mp4']; // 初始化播放列表
var vLen = vList.length; // 播放列表的长度
var curr = 0; // 当前播放的视频 var video = document.getElementById("example_video_1"); /*var video = document.createElement("VIDEO");
video.setAttribute("width", "100%");
video.setAttribute("height", "500");
video.setAttribute("id", "example_video_1");
video.setAttribute("class", "video-js vjs-default-skin");
video.setAttribute("preload", "none");
video.setAttribute("poster", "video//demo.jpg");
video.setAttribute("data-setup", "{}");
video.setAttribute("controls", "yes");
document.getElementById("playervideo").appendChild(video);*/
//document.body.appendChild(video); video.addEventListener('ended', play);
play();
function play(e) {
video.src = vList[curr];
video.load();
video.play();
curr++;
if(curr >= vLen){
curr = 0; // 播放完了,重新播放
} }
</script>
<!-- /Video player -->
</html>
通过两个视频实现
注:通过两个视频连续播放,poster需要设置一个两个视频衔接处比较接近的图片,禁止黑屏
第二个例子也可以用来实现多个视频连续播放
video设置视频的播放位置(本例中实现效果是视频第一次播放完成后,接下来中从视频的中间部位开始循环播放)的更多相关文章
- video标签实现多个视频循环播放
<head> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </he ...
- 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface)
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- 最简单的视音频播放演示样例7:SDL2播放RGB/YUV
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- 最简单的视音频播放演示样例8:DirectSound播放PCM
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- android 随手记 videoview循环播放网络视频 和mediaplayer+sufaceview播放网络视频
1:videoview循环播放视频 1>xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res ...
- HTML5中将video设置为背景的方法
主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999.再插入的内容自然就覆盖在 ...
- Android - 标准VideoView播放演示样例
标准VideoView播放演示样例 本文地址: http://blog.csdn.net/caroline_wendy 在Android SDK中的ApiDemos内, 提供标准播放视频的代码,使用V ...
随机推荐
- Esper简介
1. CEP(Complex Event Processing, 复杂事件处理) 事件(Event)一般情况下指的是一个系统中正在发生的事,事件可能发生在系统的各个层面上,它可以是某个动作,例如客户下 ...
- Button 控件
Button 控件是由system.Windows.Forms.button类提供,该控件最常用使用就是编写处理按钮的Click事件及MouseEnter事件代码 常用属性 Text按钮的说明 Ima ...
- 如鹏网学习笔记(十)DOM
DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...
- Docker学习之Docker容器基本使用
Docker学习之Docker容器基本使用 新建容器并启动 命令格式:docker run --options repository:tag 后台运行 命令格式:-d 已存在的容器相关操作 启动:do ...
- C# 提高必备精品--你所需要的NET笔记
一. 交换两个数据的值: 1. //创建一个临时变量 //int temp; //temp = num1; ////用num2的值覆盖掉num1 //num1 = num2; ////将存储在临时变 ...
- Linux安装之后需要进行的一些步骤
查看IP 首先安装后需要查看ip用SSH或者XSHELL来连接Linux,查看ip代码 ifconfig 需要执行 sudo yum install net-tools 命令安装之后 就可以看到ip了 ...
- [LeetCode]3Sum Closest题解
3sum Closest: Given an array S of n integers, find three integers in S such that the sum is closest ...
- Android Studio下载/更新SDK
今天安装配置Android Studio的时候,用SDK Manager下载SDK的时候只显示了一个7.0,别的都刷新不出来(被墙了).去网上搜索怎么解决,发现很多帖子的方法已经过时了(跟现在的AS版 ...
- Map 模板
#include<stdio.h> #include<iostream> #include<map> using namespace std; typedef pa ...
- 关于Python的那点吐槽
之前听到过别人有说过Python只是一个玩具做不了大项目,我当时是嗤之以鼻的,不说豆瓣这样的公司采用Python做的网站,GitHub上那么多大项目都是用Python写的,怎么能说Python只是一个 ...