html5 怎么点一个按钮,播放一个相应的视频

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 怎么点一个按钮,播放一个相应的视频相关的知识，希望对你有一定的参考价值。

html5 怎么点一个按钮,播放一个相应的视频或音频，并且把这些按钮做成一种列表的形式
最好能写出一部分的代码，供我学习
在当前网页做成像一个播放器的那种形式，点击一个条目，就播放一段相对应的视频。

    【方法步骤】：

    首先下载video.js，百度一下就能找到；

    这个是下载后的目录；

    先把要用到的js\\css\\swf都加载到html页面上。如：

    <link href="video-js/video-js.css" rel="stylesheet" type="text/css">

    <script src="video-js/video.js"></script>

    <script>

    videojs.options.flash.swf = "video-js/video-js.swf";

    </script>

    加入下面的代码：

    <video id="my_video_1" class="video-js vjs-default-skin" controls    preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"    data-setup="">        <source src="Wildlife.mp4" type='video/mp4'>      </video>

    只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频；

    然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能，比如字幕等，这个以后再写。

    【注意事项】：

    如果是IE浏览器就将视频替换为传统的以FLASH形式播放；

    解决IE不能播放的问题很简单。加入：<script>if (navigator.userAgent.indexOf('MSIE') >= 0) document.getElementById("videoDiv").innerHTML='<embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" >'; </script>；

    在信息量越来越大的今天，越来越多的网站重视数据信息的多样化与个性化，随着多媒体技术逐渐发展提高，在线展示视频、音频、PPT、图表等技术也越来越多地应用到了各行各业中，无论是企业还是个人，都在改变着自己的网站风格。

 参考技术A <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>

<video src="movie.webm" controls="controls" id="video">
    您的破浏览器都是古董了，早该换了，不然休想看我们的小电影(*´・v・)
</video>
<br/>
<button onclick="bofang()">播放</button>
<button onclick="zanting()">暂停</button>
<button onclick="kuaijin()">快进10秒</button>
<button onclick="kuaitui()">快退10秒</button>
<button onclick="shutup(this)">闭嘴</button>
<button onclick="soso()">加速播放</button>
<button onclick="yu()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">提高嗓门</button>
<button onclick="lower()">降低嗓门</button>
<script>
    var video=document.getElementById("video");
    //播放方法
    function bofang()
        video.play();
    
    //暂停
    function zanting()
        video.pause();
    
    //快进
    function kuaijin()
        video.currentTime+=10;
    
    //快退
    function kuaitui()
        video.currentTime-=10;
    
    //静音
    function shutup(obj)
        if(video.muted)
            obj.innerHTML="闭嘴";
            video.muted=false;
        else
            obj.innerHTML="张嘴";
            video.muted=true;
        
    
    //加速(3)
    function soso()
        video.playbackRate=3;
    
//减速（3）
    function yu()
        video.playbackRate=1/3;
    

    function normal()
        video.playbackRate=1;
    

    //调高声音
    function upper()
        video.volume+=0.3;
    
    //降低声音
    function lower()
        video.volume-=0.3;
    
</script>
</body>
</html>

 参考技术B 告诉你一个可行的思路吧，分太少了，先设置个div，让他居中在最顶层，把视频文件插入进去，把div的display属性设置为隐藏，然后你点击按钮的时候，用js使得div的display为可见，然后，设置视频播放 参考技术C

这里有个简单的HTML5视频播放代码：

http://www.w3school.com.cn/tiy/t.asp?f=html5_video_all

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
  <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

追问

W3C的这个是播放一个视频，我找到了一个方法能在W3C上使用，但是到了本地就无法进行视频切换~！

追答

切换的话，需要添加JS。

 参考技术D 分太少了吧,思路是改变视频路径就行了，如果有加分我可以贴代码追问

你就告诉下我呗，我就25个财富点啊~

追答<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5视频播放器</title>
</head>

<body>

<video id="myVideo">你的浏览器不支持video标签</video>
<a href="#" onClick="playlist(this)" id="jieba4">街霸</a>
<a href="#" onClick="playlist(this)" id="narutoop3">铁拳</a>
<script>
function playlist(a)
var MV=document.getElementById("myVideo");
MV.src=a.id+'.mp4';
MV.play();

</script>
</body>
</html>

追问

这个还是跟我的想法还是有点出入，我想做成的是这个样子，当点击视频二，三的时候，会在这个框框中，播放出相应的视频，而不是跳了个网页。

追答

晕，我的代码你试没试哦，不是说我用a标签就会跳转网页，我只是举个例子而已。a标签可以换成按钮，但是实际应用你也应该知道，都是点击视频列表吧而不是点击按钮，我这个例子不会跳转网页好吧。

追问

我已经弄出来了，不过还是谢谢你~

本回答被提问者和网友采纳

手机上出现 html 视频标签的大播放按钮

【中文标题】手机上出现 html 视频标签的大播放按钮【英文标题】：Big play buttons appears on phone for html video tag 【发布时间】：2016-07-20 13:36:16 【问题描述】：

在我的网站中添加了 html 视频标签，并根据我处理播放暂停的需要在外部放置了播放按钮。在所有设备上都可以正常工作，但除了 iphone，当我们使用 iphone safari http://www.snoozeal.com/987654321@

打开视频时，视频中心会出现一个大播放按钮

尝试了许多堆栈和其他解决方案，但没有奏效

这是我尝试过的一些 css 

video::-webkit-media-controls-fullscreen-button 
display: none;

video::-webkit-media-controls-play-button 
   background: red; 

video::-webkit-media-controls-play-button 
video::-webkit-media-controls-timeline 
video::-webkit-media-controls-current-time-display
video::-webkit-media-controls-time-remaining-display 
video::-webkit-media-controls-time-remaining-display 
video::-webkit-media-controls-mute-button 








video::-webkit-media-controls 
    display:none !important;


.overlay-video video pointer-events: none
.overlay-video video::-webkit-media-controls display: none !important


*::-webkit-media-controls-panel 
   display: none!important;
  -webkit-appearance: none;


/* Old shadow dom for play button */

*::--webkit-media-controls-play-button 
  display: none!important;
 -webkit-appearance: none;


/* New shadow dom for play button */

/* This one works */

*::-webkit-media-controls-start-playback-button 
  display: none!important;
  -webkit-appearance: none;

【问题讨论】：

看来您解决了播放按钮大小的问题。仅供参考，请查看视频默认图像的 HTML 视频海报属性 - 在我的 iPhone 中，它现在显示为一个空白框。 否，请在任何桌面上检查它是如何工作的，并在 iphone 上检查该问题。即使在 iphone 上也需要像桌面播放图标一样 我在 iPhone 上看不到 video poster - 我只看到视频所在的空白区域。所以你的白色播放按钮不会出现。它就在那里（虽然我看到它现在有一个style=display: none）。添加视频海报并取消这种风格。 【参考方案1】：

试试这个隐藏 iOS 上的播放按钮

video::-webkit-media-controlsdisplay: none !important;

【讨论】：

以上是关于html5 怎么点一个按钮,播放一个相应的视频的主要内容，如果未能解决你的问题，请参考以下文章

html5：上一个/下一个按钮播放前/后视频

如何使用带有 ID 的单独播放按钮播放多个 HTML5 视频

html5 视频中的单独播放/暂停按钮

iOS iPad 上未显示 HTML5 视频播放按钮

从父级的播放按钮在 iframe 中播放 html5 视频

播放 Html5 视频并在特定时间点暂停