html5 video

最新推荐文章于 2022-01-04 21:10:42 发布

fivestar2009

最新推荐文章于 2022-01-04 21:10:42 发布

阅读量371

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/fivestar2009/article/details/79467318

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

视频标签：估计也就是自动播放，js换文件播放，这两种情况吧

autoplay="autoplay" 自动播放

loop=loop 循环播放

var file = document.getElementById('file').files[0];

var url = window.URL.createObjectURL(file) ； js获取文件路径

document.getElementById("my-video").src = url; 更换video 的source的src路径
var myVideo=document.getElementById("my-video");

myVideo.play(); video播放

<div class="panel-body">
<video id="my-video" controls="controls" autoplay="autoplay" preload="auto" loop="loop" width="525" height="240"
poster="m.png" >
<source src="/assets/screen/jq22-sp.mp4" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>

</div>

}

另外一个网上的自动播放

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="makeNormal()">普通</button>
<button οnclick="changelj()">改变路径</button>
<input type="file" id="file" οnchange="onInputFileChange()">
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width=320;
}

function makeNormal()
{
myVideo.width=420;
}

function changelj(){
document.getElementById("video1").src="video/3.mp4";
document.getElementById("media").load();
}

function onInputFileChange(){
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
var video = document.getElementById("video1").src=url;
//var myVideo=document.getElementById("video1");
//myVideo.play();

var myVideo=document.getElementById("video1");
myVideo.addEventListener('ended', function(){
play();
});
myVideo.play();
}

function play(){
var myVideo=document.getElementById("video1");
myVideo.play();
}

</script>

</body>
</html>

fivestar2009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 video

视频标签：估计也就是自动播放，js换文件播放，这两种情况吧autoplay="autoplay" 自动播放 loop=loop 循环播放var file = document.getElementById('file').files[0]; var url = window.URL.createObjectURL(file) ； js获取文件路径document.getElementById...
复制链接

扫一扫

专栏目录