项目要求:
接入配置的视频,动态地址,进入页面自动播放
遇到问题:
进入页面第一个视频不会显示,无法自动播放,因为某些原因,我们采用Object 标签来加载flash插件,显示视频。
初始代码如下:
<div class="content" v-for="(val,key,i) in videoSource.slice(0,4)" :key="i">
<object type="application/x-shockwave-flash" id="SampleMediaPlayback" name="SampleMediaPlayback"
align="middle" data="/static/js/SampleMediaPlayback.swf" width="745.6"
height="370">
<param NAME="AutoStart" VALUE="-1">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<param name="allowscriptaccess" value="sameDomain">
<param name="allowfullscreen" value="true">
<param name="flashvars"
:value="getvv(val)"
>
</object>
</div>
vmList() {
const {VIDEO_SRC1, VIDEO_SRC2, VIDEO_SRC3, VIDEO_SRC4} = this.dataList[0] || {};
const list = [];
if (VIDEO_SRC1) list.push(VIDEO_SRC1);
if (VIDEO_SRC2) list.push(VIDEO_SRC2);
if (VIDEO_SRC3) list.push(VIDEO_SRC3);
if (VIDEO_SRC4) list.push(VIDEO_SRC4);
return list;
},
解决方案:
大佬出手,找到问题,原因是接数据的时候多了个字段,进一步的优化代码
<div class="con">
<div class="content" v-for="item in vmList" :key="item">
<object
type="application/x-shockwave-flash"
id="SampleMediaPlayback"
name="SampleMediaPlayback"
align="middle"
data="/static/js/SampleMediaPlayback.swf"
width="745.6"
height="370"
>
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowscriptaccess" value="sameDomain" />
<param name="allowfullscreen" value="true" />
<param
name="flashvars"
:value="`src=rtmp://${item};streamType=live&autoPlay=true&controlBarAutoHide=true&controlBarPosition=bottom`"
/>
</object>
</div>
vmList() {//视频固定为四个,所以固定的写死了地址变量
const {VIDEO_SRC1, VIDEO_SRC2, VIDEO_SRC3, VIDEO_SRC4} = this.dataList[0] || {};
const list = [];
if (VIDEO_SRC1) list.push(VIDEO_SRC1);
if (VIDEO_SRC2) list.push(VIDEO_SRC2);
if (VIDEO_SRC3) list.push(VIDEO_SRC3);
if (VIDEO_SRC4) list.push(VIDEO_SRC4);
return list;
},
有关于加载flash的具体信息可查看 紫竹风 的博客
链接:HTML 页面加载 Flash 插件的几种方法
地址:https://blog.csdn.net/happylee6688/article/details/34436011