网页插入SWF视频，如何带有播放控制按钮、进度条等！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页插入SWF视频，如何带有播放控制按钮、进度条等！相关的知识，希望对你有一定的参考价值。
参考技术A 1.下载Flash_controller.swf，是一个有常用按钮与进度条的swf播放器。
2.
把Flash_controller.htm、Flash_controller.swf、Flash_controller.xml、要播放的01.swf文件放在一个目录下。
3.
点击Flash_controller.htm就可以播放01.swf，并有按钮：开始、暂停、停止、进度条。 参考技术B 这个只能在制作flah的时候加上才能导出带有播放按钮和进度条的swf格式的视频文件，在网页中再做这些功能就喊麻烦了吧
video标签学习，实现有声音自动循环播放
video标签核心属性：
src 要播放的视频的 URL。
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。
loop 如果出现该属性，视频播放结束会再次播放，即循环播放。
muted 静音播放。
poster 视频的封面图。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，该属性无效。
video不能自动播放的原因：
未加autoplay属性，或者autoplay属性为false
有的浏览器不允许非静音自动播放，如谷歌、火狐浏览器等，所以要加上muted属性，才会自动播放
思路一：重现调用播放，初始视频加载优化，不需用户互动。
可能存在的问题：1、加载效率；
思路二：增加页面互动实现有声音自动播放
这个思路可能体验没那么好，需要在播放器增加处理事件，比如按钮单击事件，或者移入移出事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="G:\\testfile\\streammedia\\videoPlayer\\cvideo.css">
<script>
<!-- function openVoice() -->
<!-- var videoPlayer = document.getElementById("homeVideo") -->
<!-- videoPlayer.muted = false -->
<!-- videoPlayer.play() -->
<!-- -->
function play_v1(v)
v.play()
function stop_v1(v)
v.pause();
</script>
</head>
<body>
<!-- 思路一 -->
<!-- <video width="720" height="640" autoplay loop controls > -->
<!-- <source src="莫兰德单手劈扣领衔C.mp4" type="video/mp4" > -->
<!-- <source src="莫兰德单手劈扣领衔C.mp4" type="video/mp4" onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" > -->
<!-- <script> -->
<!-- //因为我用的是videoPlayer 默认的设置是自动播放无声的，因为有声自动播放视频会暂停，浏览器不允许 -->
<!-- //1、在点击打开弹窗的同时并调用下面的方法 -->
<!-- //2、一 先把视频声音打开 这时候肯定视频就暂停了 二 然后再设置视频播放就解决了 中间时间忽略可以不计。 -->
<!-- // 打开视频 -->
<!-- function openTheVideo() -->
<!-- this.CenterVideoDialogOff = true; -->
<!-- this.$refs["CenterVideoDialog"].getVideoSrc(); -->
<!-- alert(this.$refs["CenterVideoDialog"].getVideoSrc()); -->
<!-- getVideo(); -->
<!-- -->
<!-- //有声播放视频 -->
<!-- function getVideo() -->
<!-- this.$refs.videoPlayer.player.muted(false); -->
<!-- this.$refs.videoPlayer.player.play(); -->
<!-- -->
<!-- </script> -->
<!-- <source src="movie.ogg" type="video/ogg"> -->
<!-- <source src="movie.webm" type="video/webm"> -->
<!-- <object data="莫雷诺神奇救险领衔一.mp4" width="720" height="640"> -->
<!-- <embed src="movie.swf" width="720" height="640"> -->
<!-- </object> -->
<!-- </video> -->
<!-- 思路二 -->
<div>
<div id="v1_box" class="demo1">
<p>1：静音、自动播放</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" muted src="莫兰德单手劈扣领衔C.mp4"></video>
</div>
<div id="v2_box" class="demo2">
<p>2:有声音、自动播放（至少需要点击一下文档，产生交互）</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" src="莫兰德单手劈扣领衔C.mp4"></video>
</div>
</div>
</body>
</html>CSS:
body
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
text-align: center;
h1
color: white;
text-align: center;
p
font-family: verdana;
font-size: 20px;
#demo
height: 500px;
width: 1400px;
.demo1
width: 700px;
height: 500px;
float: left;
.demo1 video
height: 400px;
width: 400px;
.demo2
width: 700px;
height: 500px;
float: left;
.demo2 video
height: 400px;
width: 400px;
以上是关于网页插入SWF视频，如何带有播放控制按钮、进度条等！的主要内容，如果未能解决你的问题，请参考以下文章