老规矩，先看效果图：
这里主要实现效果用的是video.js插件。后面会把源码及其，js，css文件放到网盘，有需要的朋友可以提取一下，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7.4.1</title>
<link href="css/video-js.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
<style>
body {
background-color: #191919
}
.m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="m">
<button onclick="a()">开始</button>
<button onclick="b()">暂停</button>
<button onclick="c()">销毁</button>
<button onclick="d()">绑定自身事件</button>
<button onclick="m()">重建</button>
<video id="my-video" class="video-js"></video>
</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/video.min.js"></script>
<script type="text/javascript">
//设置中文
// videojs.addLanguage('zh-CN', {
// "Play": "播放",
// "Pause": "暂停",
// "Current Time": "当前时间",
// "Duration": "时长",
// "Remaining Time": "剩余时间",
// "Stream Type": "媒体流类型",
// "LIVE": "直播",
// "Loaded": "加载完毕",
// "Progress": "进度",
// "Fullscreen": "全屏",
// "Non-Fullscreen": "退出全屏",
// "Mute": "静音",
// "Unmute": "取消静音",
// "Playback Rate": "播放速度",
// "Subtitles": "字幕",
// "subtitles off": "关闭字幕",
// "Captions": "内嵌字幕",
// "captions off": "关闭内嵌字幕",
// "Chapters": "节目段落",
// "Close Modal Dialog": "关闭弹窗",
// "Descriptions": "描述",
// "descriptions off": "关闭描述",
// "Audio Track": "音轨",
// "You aborted the media playback": "视频播放被终止",
// "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
// "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
// "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
// "No compatible source was found for this media.": "无法找到此视频兼容的源。",
// "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
// "Play Video": "播放视频",
// "Close": "关闭",
// "Modal Window": "弹窗",
// "This is a modal window": "这是一个弹窗",
// "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
// ", opens captions settings dialog": ", 开启标题设置弹窗",
// ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
// ", opens descriptions settings dialog": ", 开启描述设置弹窗",
// ", selected": ", 选择",
// "captions settings": "字幕设定",
// "Audio Player": "音频播放器",
// "Video Player": "视频播放器",
// "Replay": "重播",
// "Progress Bar": "进度小节",
// "Volume Level": "音量",
// "subtitles settings": "字幕设定",
// "descriptions settings": "描述设定",
// "Text": "文字",
// "White": "白",
// "Black": "黑",
// "Red": "红",
// "Green": "绿",
// "Blue": "蓝",
// "Yellow": "黄",
// "Magenta": "紫红",
// "Cyan": "青",
// "Background": "背景",
// "Window": "视窗",
// "Transparent": "透明",
// "Semi-Transparent": "半透明",
// "Opaque": "不透明",
// "Font Size": "字体尺寸",
// "Text Edge Style": "字体边缘样式",
// "None": "无",
// "Raised": "浮雕",
// "Depressed": "压低",
// "Uniform": "均匀",
// "Dropshadow": "下阴影",
// "Font Family": "字体库",
// "Proportional Sans-Serif": "比例无细体",
// "Monospace Sans-Serif": "单间隔无细体",
// "Proportional Serif": "比例细体",
// "Monospace Serif": "单间隔细体",
// "Casual": "舒适",
// "Script": "手写体",
// "Small Caps": "小型大写字体",
// "Reset": "重启",
// "restore all settings to the default values": "恢复全部设定至预设值",
// "Done": "完成",
// "Caption Settings Dialog": "字幕设定视窗",
// "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
// "End of dialog window.": "结束对话视窗"
// });
// <video id="my-video" class="video-js" preload="auto" width="960" height="400">
// <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
// </video>
var myPlayer = videojs('my-video',{
muted: true, //是否静音
controls : false, //控制条
height:400,
width:960,
loop : true,
autoplay:true,
preload:"auto",
sources: [{
src: 'nadvideo.mp4',
type: 'video/mp4'
}]
});
// videojs("my-video").ready(function(){
// var myPlayer = this;
// myPlayer.play();
// });
function a(){
myPlayer.play();
}
function b(){
myPlayer.pause();
}
function c(){
myPlayer.dispose()
}
function d(){
myPlayer.trigger('dispose')
}
function m(){
var str = '<video id="my-video" class="video-js"></video>' ;
$(".m").html(str);
var myPlayer = videojs('my-video',{
muted: true, //是否静音
controls : false, //控制条
height:400,
width:960,
loop : true,
autoplay:true,
preload:"auto",
sources: [{
src: 'nadvideo.mp4',
type: 'video/mp4'
}]
});
myPlayer.play();
}
</script>
如果有问题可以联系我哦，看到我会尽快回复
附带：网盘地址：https://pan.baidu.com/s/1MslqCq-nK3qn4ikTrfiYow 提取码：kk6x 注释：这里没有视频，用自己的
![[sig10]CryENGINE 3: reaching the speed of light[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)