如何使用HTML代码播放MP4视频
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charSet='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<meta http-equiv='Cache-Control' content='no-transform' />
<meta http-equiv='Cache-Control' content='no-siteapp' />
<meta name='referrer' content='never'>
<meta name='renderer' content='webkit' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<title>MP4视频播放器</title>
<link rel='stylesheet' href='css/style.css'>
<style>
body {margin:0;}
<p>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}</p>
<pre><code>.active {
background-color: #4CAF50;
}
</style>
</code></pre>
</head>
<body>
<section id='main'>
<video id='player' src='./mp4/your_video.mp4' controls webkit-playsinline playsinline></video>
</section>
<section id='buttons'>
<button id='switch'>自动切换</button>
<button id='next'>下一位</button>
<a href='/index.html'><button id='next'>快手美女</button></a>
</section>
<script>
<pre><code>(function (window, document) {
if (top != self) {
window.top.location.replace(self.location.href);
}
var get = function (id) {
return document.getElementById(id);
}
var bind = function (element, event, callback) {
return element.addEventListener(event, callback);
}
var auto = true;
var player = get('player');
var randomm = function () {
player.src = './mp4/your_video.mp4';
player.play();
}
bind(get('next'), 'click', randomm);
bind(player, 'error', function () {
randomm();
});
bind(get('switch'), 'click', function () {
auto = !auto;
this.innerText = '自动: ' + (auto ? '开' : '关');
});
bind(player, 'ended', function () {
if (auto) randomm();
});
})(window, document);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nmD5 著作权归作者所有。请勿转载和采集!