十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
播放器可以弄自定义样式的
专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业密云免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
html:
div style="text-align:center;"
div
button onclick="playPause()"播放/暂停/button
button onclick="makeBig()"大/button
button onclick="makeNormal()"中/button
button onclick="makeSmall()"小/button
/div
video id="video1" width="420" style="margin-top:15px;"
source src="" type="video/mp4" /
source src="" type="video/ogg" /
Your browser does not support HTML5 video.
/video
/div
js:
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;
}
布局样式在css里改可以了
参考
source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一,有些浏览器例如有些浏览器支持 mp4格式 ,那么它就播放第一个 mp4 格式的视频,如果它不支持就检查是不是支持下面的 ogg 视频,如果支持就播放,不支持的话继续向下,下面没有source了,那么就显示“Your browser does not support the video tag.”
注意:
如果你在 video 内设置了 muted 属性,是可以通过 autoplay 实现视频的自动播放,反之则需要用户手动授权,点击播放才可以实现自动播放。
因为谷歌浏览器禁止页面在没有用户授权的情况下进行有声的视频播放
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的script标签中,输入js代码:。
if (navigator.userAgent.match(/mobile/i)) {
$('video').hide();
}
3、浏览器运行index.html页面,此时在移动端中成功隐藏了video标签的控件。
可以用CSs对video和audio标签进行修饰,因为hTMl当中所有的标签都可以用Css来修饰。Css和标签少了任何一点,就没有我们现在色彩缤纷的网页。