时间:2021-05-26
效果:
代码很简单
js
html
<link type="text/css" href="http://localhost/twitter/css/html5_video_player.css" rel="stylesheet" /><div id='wrap_html5_video'> <div id='html5_video_area'> <video id="html5_video" width="360" height="240"> <source type=" video/mp4" src="http://localhost/twitter/videos/2.mp4"></source> <source type=" video/webm" src="http://localhost/twitter/videos/2.webm"></source> </video> </div> <div id='video_control'> <div id='video_bar'> <div id='video_buffer_bar'></div> <div id='video_progress_bar'></div> </div> <div id='play_control'> <ul> <li class='inline-block'><a class='html5_video_play_btn inline-block' id='control_btn'></a></li> <li class='inline-block'><a id='mute_icon' class='html5_video_mute'></a> <div id='vol_bar' class='inline-block'> <p id='vol_value'></p> </div></li> <li class='inline-block' id='html5_video_time'><span id='html5_play_time'>00:00</span><span>/</span><span id='html5_video_duration'>33:44</span></li> <li class='inline-block'><a id='html5_video_fullscreen' class='inline-block'></a></li> </ul> </div> <div id='a'></div> </div> <div id='buffered_log'></div></div><script type="text/javascript"> require('html5/html5_video_player');</script>css
@CHARSET "UTF-8";#wrap_html5_video { padding: 10px; width: 360px;}#vol_bar,#video_bar,#vol_value { height: 9px; background-color: #999999;}#vol_bar { width: 100px; cursor: pointer;}#vol_value { background-color: #179df7; width: 50%;}#html5_video { display: block; border: 1px solid #c0deed;}#video_buffer_bar { background-color: #179DF7; width: 0;}#video_progress_bar,#video_buffer_bar { position: absolute; height: 100%;}#video_progress_bar { background-color: #0066FF; width: 2px; left: 0;}.html5_video_pause_btn,.html5_video_play_btn { width: 40px; height: 40px; cursor: pointer;}.html5_video_play_btn { background: url("http://localhost/twitter/images/html5_video.jpg") 0 0 no-repeat;}.html5_video_play_btn:hover { background: url("http://localhost/twitter/images/html5_video.jpg") -41px 0 no-repeat;}.html5_video_pause_btn { background: url("http://localhost/twitter/images/html5_video.jpg") 0 -42px no-repeat;}.html5_video_pause_btn:hover { background: url("http://localhost/twitter/images/html5_video.jpg") -41px -42px no-repeat;}#play_control a,#vol_bar { vertical-align: middle;}#html5_video_fullscreen { width: 25px; background: url("http://localhost/twitter/images/html5_video.jpg") 0 -310px no-repeat; height: 18px;}#play_control #html5_video_time { font-size: 14px;}#play_control li,#play_control ul { font-size: 0;}#play_control li:last-child { position: absolute; right: 0;}.html5_video_mute1 { background: url("http://localhost/twitter/images/html5_video.jpg") no-repeat scroll -79px -170px rgba(0, 0, 0, 0);}.html5_video_mute { background: url("http://localhost/twitter/images/html5_video.jpg") no-repeat scroll 0 -170px rgba(0, 0, 0, 0);}#mute_icon { cursor: pointer; display: inline-block; height: 15px; width: 18px;}.html5_video_mute:hover { background: url("http://localhost/twitter/images/html5_video.jpg") -19px -170px no-repeat;}#play_control li { height: 40px; vertical-align: top; margin: 0 5px;}#play_control li:after { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: '';}#play_control,#video_bar,#vol_bar { position: relative;}body .fullscreen { position: fixed; left: 0; bottom: 0; width: 100%; overflow: hidden; z-index: 2147483647; background-color: #fff;}video::-webkit-media-controls { display: none !important;}声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
帝国CMS7.5版视频播放器更新,做视频站更方便:1、系统模型的播放器新增HTML5的video播放标签、HTML5的Audio播放标签、jwplayer播放器
b站也就是bilibili,在b站,“如果您想体验HTML5视频播放器的效果,请开启HTML5视频播放器试用”,那么怎么切换到html5
Video.js是一个通用的在网页上嵌入视频播放器的JS库,Video.js自动检测浏览器对HTML5的支持情况,如果不支持HTML5则自动使用Flash播放器
【HTML5】---【MiranaVideo播放器】请使用新版的firefox或chrome等支持video格式的浏览器打开多个视频加载,图片浏览:Mirana
1.在layer弹窗组件中如果使用了flash播放器,全屏是正常的但若使用了HTML5的播放器,全屏失效举个栗子我是字layer.open({type:1,ti